javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS动态设置CSS样式

使用JavaScript动态设置CSS样式的三种常用方式

作者：我自纵横2023

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

一、理论基础

1.1 三种主要的方式

在 JavaScript 中，有三种主要的方式可以动态设置 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 属性有其独特的优势和不足之处，以下是详细分析：

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>

优缺点分析

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 类，元素的背景颜色会变为黄色，字体会变粗。

代码解释

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 属性的优势

2.4 修改 <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>

代码解释

四、总结

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

以上就是使用JavaScript动态设置CSS样式的三种常用方式的详细内容，更多关于JS动态设置CSS样式的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文