03-动态修改样式

码路教育 7/19/2022

# 1. 动态操作样式

JavaScript动态修改样式，有两个选择：

选择一：在CSS中编写好对应的样式，动态的添加class；
选择二：动态的修改style属性；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            color: red;
            font-size: 30px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="box">
        我是一个box
    </div>

    <script>
        let boxEle = document.querySelector(".box");

        boxEle.onclick = function(){
            // 1）操作行内样式
            // boxEle.style.color = "red";
            // boxEle.style.fontSize = "30px";
            // boxEle.style.backgroundColor = "gold";

            // 2）操作class类 
            // class的attribute 对应的 property是 className
            boxEle.className = "active"
        }
    </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# 1.1 元素的className和classList

元素的class attribute，对应的property并非叫class，而是className：

因为JavaScript早期是不允许使用class这种关键字来作为对象的属性，所以DOM规范使用了className
可以对className进行赋值，它会替换整个类中的字符串

如果我们需要添加或者移除单个的class，那么可以使用classList属性：

elem.classList.add (class) ：添加一个类
elem.classList.remove(class)：添加/移除类
elem.classList.toggle(class) ：如果类不存在就添加类，存在就移除它
elem.classList.contains(class)：检查给定类，返回 true/false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            color: red;
            font-size: 30px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="box">
        我是box
    </div>
    <button>切换</button>

    <script>
        let boxEle = document.querySelector(".box");
        // 把人家本身的覆盖掉了
        // boxEle.className = "active"

        // boxEle.classList.add("active")
        // boxEle.classList.remove("box")

        let btn = document.getElementsByTagName("button")[0];
        btn.onclick = function(){
            // boxEle.classList.add("active")

            // boxEle.classList.toggle("active")

            console.log(boxEle.classList.contains("box"));
        }
    </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# 1.2 元素的style属性

单独修改某一个CSS属性，那么可以通过style来操作：

对于多词（multi-word）属性，使用驼峰式 camelCase
多个样式的写法，我们需要使用cssText属性，不推荐这种用法，因为它会替换整个字符串

<body>
    <div class="box" style="background-color: gold; color: white;">
        我是一个孤独的DIV
    </div>
    <script>
        let boxEle = document.querySelector(".box");
        // 获取
        console.log(boxEle.style.backgroundColor);
        console.log(boxEle.style.color);

        // 设置
        // boxEle.style.fontSize = "30px"
        // boxEle.style.color = "red"

        // 使用cssText 了解
        boxEle.style.cssText = "background-color: pink; font-size:30px; color:red;";
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 1.3 元素style的读取 - getComputedStyle

对于内联样式，是可以通过style.*的方式读取到的
对于style、css文件中的样式，是读取不到的
通过getComputedStyle的全局函数来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            color: gold;
        }
    </style>
</head>
<body>
    
    <div class="box" style="background-color: red;">
        我是一个孤独的DIV
    </div>
    <script>
        let boxEle = document.querySelector(".box");
        console.log(boxEle.style.backgroundColor);
        // console.log(boxEle.style.color);

        console.log(getComputedStyle(boxEle).color);
    </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

02-属性节点操作 04-JS操作盒子模型