JS设置CSS样式|极客笔记

JS设置CSS样式

在网页开发中，经常会涉及到通过JavaScript动态地修改页面元素的样式。通过JavaScript设置CSS样式可以实现一些有趣的效果，比如hover时改变颜色、点击按钮改变背景色等。本文将详细介绍如何使用JavaScript来设置CSS样式。

1. 使用style属性

最简单的方法就是直接使用元素的style属性来设置CSS样式。可以通过JavaScript直接修改元素的style属性，来实现动态改变样式的效果。

<!DOCTYPE html>
<html>
<head>
    <title>JS设置CSS样式</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <button onclick="changeColor()">改变颜色</button>

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

运行上面的代码，点击按钮后可以看到盒子的背景颜色会变成浅蓝色。

2. 使用classList属性

除了直接操作style属性，还可以使用classList属性来动态添加、删除、切换类名，从而改变元素的样式。

<!DOCTYPE html>
<html>
<head>
    <title>JS设置CSS样式</title>
    <style>
        .blue {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <button onclick="toggleColor()">切换颜色</button>

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

运行上面的代码，点击按钮后可以看到盒子的背景颜色会在蓝色和粉红色之间来回切换。

3. 使用style标签

如果需要添加一些动态生成的样式，可以通过创建style标签的方式来设置CSS样式。

<!DOCTYPE html>
<html>
<head>
    <title>JS设置CSS样式</title>
</head>
<body>
    <div class="box" id="box"></div>
    <button onclick="addStyle()">添加样式</button>

    <script>
        function addStyle() {
            var style = document.createElement('style');
            style.innerHTML = `
                .green {
                    background-color: lightgreen;
                }
            `;
            document.head.appendChild(style);

            var box = document.getElementById('box');
            box.className = 'green';
        }
    </script>
</body>
</html>

运行上面的代码，点击按钮后可以看到盒子的背景颜色会变成浅绿色。

总的来说，通过JavaScript设置CSS样式可以实现页面元素的动态样式变化，为网页添加更加生动和有趣的效果。