JavaScript中的style和className

最新推荐文章于 2022-07-08 10:54:10 发布

原创最新推荐文章于 2022-07-08 10:54:10 发布 · 4.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

首先在这里提一下css的样式优先级，大家作为了解：

ID 选择器，如 #id{}
类选择器，如 .class{}
属性选择器，如 a[href="segmentfault.com"]{}
伪类选择器，如 :hover{}
伪元素选择器，如 ::before{}
标签选择器，如 span{}
通配选择器，如 *{}

优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

这个作为了解就行，毕竟重点不在这里，因为要讲到这两者的区别，这里需要这个知识，所以提一下。

而在js中使用style其实就是在进行样式的行间操作，这个更好的表达的话当然是代码，这里我就不多赘述了，可以看一下下边的图片就懂了，然后F12打开控制台，进行查看其变化就能明白了。下面就直接上代码上效果吧，更容易理解。

行间样式：

是不是立马就能看出为什么是行间操作了，这样就更容易理解了。OK，言归正传——

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        .box{
            background: red;
        }
    </style>
    <script>
        function toRed() {
            var Div = document.getElementById('div1');
            Div.className='box';
        }

    </script>
</head>
<body>
<input type="button" value="变红"onclick="toRed()">

<div id="div1"></div>
</body>
</html>

从上边可以看出，这样写是没有任何问题的，他是可以正常使用的。那么，我们再加点东西呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        .box{
            background: red;
        }
    </style>
    <script>
        function toRed() {
            var Div = document.getElementById('div1');
            Div.className='box';
        }

        function toGreen() {
            var Div = document.getElementById('div1');
            Div.style.background='green';

        }
    </script>
</head>
<body>
<input type="button" value="变红"onclick="toRed()">
<input type="button" value="变绿"onclick="toGreen()">


<div id="div1"></div>
</body>
</html>

先点变红（className），再点变绿（style）：