JS修改CSS样式|极客笔记

JS修改CSS样式

在网页开发中，我们经常会用到JavaScript来操作网页元素，其中一个常见的操作就是修改元素的CSS样式。通过JavaScript，我们可以动态地改变元素的样式，实现一些交互效果。

本文将介绍如何使用JavaScript来修改CSS样式，包括通过style属性、classList属性和直接修改样式表等方法。我们将通过一些示例代码来演示如何实现这些功能，并展示最终的效果。

通过style属性修改样式

在HTML中，每个元素都有一个style属性，该属性可以用来设置元素的内联样式。通过JavaScript，我们可以直接操作这个属性来修改元素的样式。

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <button onclick="changeColor()">Change Color</button>

    <script>
        function changeColor() {
            document.getElementById('box').style.backgroundColor = 'blue';
        }
    </script>
</body>
</html>

在上面的代码中，我们有一个div元素和一个按钮。当点击按钮时，调用changeColor函数，该函数会修改div元素的背景颜色为蓝色。

通过classList属性修改样式

除了直接修改元素的style属性外，我们还可以使用classList属性来操作元素的class。通过添加、删除或切换类名，我们可以改变元素的样式。

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .blue {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <button onclick="toggleColor()">Toggle Color</button>

    <script>
        function toggleColor() {
            document.getElementById('box').classList.toggle('blue');
        }
    </script>
</body>
</html>

在上面的示例中，当点击按钮时，调用toggleColor函数，该函数会切换div元素的类名为blue，从而改变div元素的背景颜色。

直接修改样式表

除了上述两种方法外，我们还可以直接操作样式表来修改元素的样式。通过JavaScript，我们可以创建、删除或修改样式表中的规则，从而实现样式的动态变化。

<!DOCTYPE html>
<html>
<head>
    <style id="custom-style"></style>
</head>
<body>
    <div class="box" id="box"></div>
    <button onclick="changeWidth()">Change Width</button>

    <script>
        function changeWidth() {
            var style = document.getElementById('custom-style');
            var rule = '#box { width: 200px; height: 100px; background-color: red; }';

            if (style.styleSheet) {
                style.styleSheet.cssText = rule;
            } else {
                style.appendChild(document.createTextNode(rule));
            }
        }
    </script>
</body>
</html>

在上面的示例中，当点击按钮时，调用changeWidth函数，该函数会动态地创建一个样式规则，从而改变div元素的宽度。

通过以上三种方法，我们可以灵活地使用JavaScript来修改元素的CSS样式，实现丰富的网页交互效果。在实际开发中，根据需求选择适合的方法，来实现所需的功能。