使用 JavaScript 动态设置 CSS 样式-EW帮帮网

使用 JavaScript 动态设置 CSS 样式

在前端开发中，很多时候我们需要根据用户的操作、页面的状态或者其他动态因素来改变元素的样式。这时，使用 JavaScript 动态设置 CSS 样式就显得尤为重要。本教程将详细介绍如何使用 JavaScript 来动态改变元素的 CSS 样式。

一、理论基础

1.1 三种主要的方式

在 JavaScript 中，有三种主要的方式可以动态设置 CSS 样式：

直接操作元素的 style 属性：这是最直接的方式，通过 JavaScript 直接修改元素的内联样式。
修改元素的 classList 属性：通过添加、移除或切换元素的 CSS 类来改变样式。
修改 <style> 标签的内容：通过 JavaScript 动态修改 <style> 标签中的 CSS 规则。

1.2 优先级说明

不同的样式设置方式有不同的优先级，内联样式（通过 style 属性设置）的优先级最高，其次是 <style> 标签中的样式，最后是外部 CSS 文件中的样式。

二、具体实现方法及示例

2.1 直接使用元素的 `setAttribute()` 方法操作元素的 `style` 属性

原理

在 JavaScript 里，setAttribute() 是 DOM 元素对象的一个方法，可用于为指定的 HTML 元素设置属性值。它的基本语法如下：

element.setAttribute(name,value)

示例代码

使用setAttribute()方法

<body>
    <div id="myBox" class="myBox">
    <script>
        // 获取div元素
        const boxs = document.getElementById('myBox');
        // 直接设置 boxs 的 style 属性
        boxs.setAttribute('style', 'width: 200px; height: 200px; background-color: red;');
    </script>
</body>

优缺点
在网页开发中，使用 setAttribute() 方法设置元素 style 属性有其独特的优势和不足之处，以下是详细分析：

优点
- 减少 DOM 操作次数以提高性能：通过 setAttribute() 方法将属性的值直接设置到元素的属性中，而非通过 JavaScript 对象来操作，能够减少 DOM 操作的次数，进而提高网页性能。因为频繁的 DOM 操作会导致浏览器进行重排和重绘，影响页面的响应速度和性能。
- 提高代码的可读性和可维护性：当需要设置多个样式属性时，使用 setAttribute() 方法可以将所有样式集中在一个字符串中，使代码更加简洁和易于理解，也便于后续的修改和管理。相比于多次使用 element.style.property = value 的方式，代码结构更加清晰。
缺点
- 样式优先级问题：使用 setAttribute() 设置的内联样式具有较高的优先级，可能会覆盖外部样式表或内部样式表中的样式。这可能导致样式的控制变得复杂，难以预测最终的显示效果。例如，如果外部样式表中定义了某个元素的基本样式，而使用 setAttribute() 设置了相同的样式属性，那么内联样式将优先显示，可能破坏整体的样式设计。
- 缺乏动态性和灵活性：使用 setAttribute() 方法设置的样式是静态的，一旦设置就很难根据不同的条件动态地修改样式。而使用 element.style 可以更方便地在 JavaScript 中动态修改单个样式属性。例如，如果需要根据用户的交互动态改变元素的宽度，使用 element.style.width 可以直接修改，而使用 setAttribute() 则需要重新设置整个 style 属性字符串，操作相对繁琐。
代码可维护性在某些情况下降低：虽然 setAttribute() 可以使代码在一定程度上更加简洁，但当样式字符串过长或包含复杂的样式规则时，代码的可读性和可维护性会降低。例如，当样式字符串中包含大量的 CSS 属性和值时，很难快速定位和修改特定的样式属性。

2. 2 直接使用 `DOM节点.style.样式名 = 样式值` 的方式，这种方式可称为“直接设置内联样式”

原理

在 JavaScript 里，document.getElementById() 会获取具有特定 id（）的元素。而获取到的元素对象具备 style 属性，该属性能够让我们直接操作元素的内联样式。通过给 style 属性的具体样式属性（像 width、height、backgroundColor 等）赋值，就可以动态地修改元素的外观。

示例代码

<body>
    <div id="myBox" class="myBox">
    <script>
        // 获取div元素
        const boxs = document.getElementById('myBox');
        // 直接设置 boxs 的 style 属性
        boxs.style.width = '200px';
        boxs.style.height = '200px';
        boxs.style.backgroundColor = 'blue';
    </script>
</body>

优缺点分析

优点
- 简单直接：可以迅速对元素的样式进行修改，不用去修改 CSS 文件或者操作类名，代码编写容易理解。
- 即时生效：设置之后元素的样式会马上改变，能够实现实时的交互效果。
缺点
- 无法设置 !important：当使用这种方式设置样式时，无法添加 !important 声明，要是遇到有 !important 的样式规则，此设置可能会失效。
- 可维护性差：如果有大量的样式需要设置，会让 JavaScript 代码变得冗长，并且不利于样式的统一管理和维护。

2.3 修改元素的 `classList` 属性

原理

classList 属性是一个 DOMTokenList 对象，它提供了一系列方法来操作元素的 CSS 类，如 add、remove、toggle 等。DOMTokenList 是一个类数组对象，代表了元素的 class 属性中的一组标记（即类名），这些方法可以让我们方便地动态修改元素的类名，从而改变元素的样式。

常用方法及示例代码

1. add() 方法

作用：用于向元素的 classList 中添加一个或多个类名。如果类名已经存在，则不会重复添加。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态设置样式 - classList 属性</title>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <button id="highlightButton">高亮显示</button>
    <p id="myText">这是一段文本，点击按钮可以高亮显示它。</p>
    <script>
        const button = document.getElementById('highlightButton');
        const text = document.getElementById('myText');

        button.addEventListener('click', function () {
            // 添加 highlight 类
            text.classList.add('highlight');
        });
    </script>
</body>
</html>

上述代码中，通过 add 方法为 id 为 myText 的元素添加了 highlight 类，元素的背景颜色会变为黄色，字体会变粗。

代码解释

在 CSS 中定义了一个名为 highlight 的类，该类包含了背景颜色和字体加粗的样式。
通过 document.getElementById 方法获取按钮和文本元素。
给按钮添加一个点击事件监听器。
当按钮被点击时，使用 text.classList.add('highlight') 方法给文本元素添加 highlight 类，从而改变其样式。

2. remove() 方法

作用：用于从元素的 classList 中移除一个或多个类名。如果类名不存在，不会报错。

示例代码：

<!DOCTYPE html> 
<html lang="en">  
<head> 
    <meta charset="UTF-8"> 
    <style> 
      .highlight { 
            background-color: yellow; 
        } 
    </style> 
</head>  
<body> 
    <div id="myDiv" class="highlight">这是一个测试 div。</div> 
    <script> 
        const myDiv = document.getElementById('myDiv');  
        myDiv.classList.remove('highlight');  
    </script> 
</body>  
</html>

上述代码中，remove 方法将 myDiv 元素的 highlight 类移除，元素的背景颜色恢复默认。

3. toggle() 方法

作用：用于在元素的 classList 中切换类名。如果类名存在，则移除它；如果类名不存在，则添加它。

示例代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <style> 
      .highlight { 
            background-color: yellow; 
        } 
    </style> 
</head> 
<body> 
    <div id="myDiv">这是一个测试 div。</div> 
    <button onclick="toggleClass()">切换类名</button> 
    <script> 
        function toggleClass() { 
            const myDiv = document.getElementById('myDiv');  
            myDiv.classList.toggle('highlight');  
        } 
    </script> 
</body> 
</html>

上述代码中，击按钮时，toggle 方法会在 myDiv 元素的 classList 中切换 highlight 类的存在状态，从而改变元素的背景颜色。

4. contains() 方法

作用：用于检查元素的 classList 中是否包含指定的类名。返回一个布尔值。

示例代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <style> 
      .highlight { 
            background-color: yellow; 
        } 
    </style> 
</head> 
<body> 
    <div id="myDiv" class="highlight">这是一个测试 div。</div> 
    <script> 
        const myDiv = document.getElementById('myDiv');  
        const hasHighlight = myDiv.classList.contains('highlight');  
        console.log(hasHighlight);  // 输出: true 
    </script> 
</body> 
 
</html>

上述代码中，contains 方法检查 myDiv 元素是否包含 highlight 类，并将结果存储在 hasHighlight 变量中。

使用 classList 属性的优势

代码简洁：使用 classList 提供的方法可以用较少的代码实现类名的操作，避免了手动拼接和解析 class 属性字符串的繁琐。
提高可读性：方法名直观地表达了操作的意图，使代码更易于理解和维护。
避免错误：classList 方法会自动处理类名的添加、移除和切换，避免了手动操作可能导致的语法错误和意外结果。

2.3 修改 `<style>` 标签的内容

原理

可以通过 JavaScript 动态创建或修改 <style> 标签中的 CSS 规则，从而改变页面中元素的样式。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态设置样式 - 修改 style 标签内容</title>
</head>
<body>
    <button id="changeStyleButton">改变样式</button>
    <div id="myDiv">这是一个 div 元素，点击按钮可以改变它的样式。</div>
    <script>
        const button = document.getElementById('changeStyleButton');
        const div = document.getElementById('myDiv');

        button.addEventListener('click', function () {
            // 创建一个新的 style 元素
            const style = document.createElement('style');
            // 设置 style 元素的内容
            style.innerHTML = `
                #myDiv {
                    border: 2px solid blue;
                    padding: 10px;
                }
            `;
            // 将 style 元素添加到 head 中
            document.head.appendChild(style);
        });
    </script>
</body>
</html>

代码解释

通过 document.getElementById 方法获取按钮和 div 元素。
给按钮添加一个点击事件监听器。
当按钮被点击时，创建一个新的 <style> 元素，并设置其内容为新的 CSS 规则。
最后，将 <style> 元素添加到 <head> 标签中，从而改变 div 元素的样式。

四、总结

通过以上三种方式，我们可以在 JavaScript 中动态设置 CSS 样式。直接操作 style 属性适合临时、简单的样式修改；修改 classList 属性适合根据不同状态切换预定义的样式；修改 <style> 标签内容适合动态创建全局的 CSS 规则。在实际开发中，可以根据具体需求选择合适的方式。

使用 JavaScript 动态设置 CSS 样式