JavaScript 修改 CSS

在实际开发中，我们经常需要使用 JavaScript 动态地改变元素的 CSS 样式。比如鼠标移到按钮上时改变它的颜色，或者点击按钮后隐藏某个元素。

在 JavaScript 中，想要修改一个元素的样式，主要有以下 2 种方式。

操作 style 属性：通过元素的 style 属性，来设置单个 CSS 属性。
操作类名：通过添加、删除或切换元素的 CSS 类，来批量设置样式。

操作 style 属性

在 JavaScript 中，我们可以修改 DOM 元素的 style 属性来直接修改它的内联样式。

语法：

obj.style.attr = "值";

说明：

obj 是一个 DOM 对象。attr 是一个 CSS 属性名，它采用的是 “骆驼峰” 型。何为 “骆驼峰型” 呢？举个例子，font-size 应该写成 fontSize，border-bottom-width 应该写成 borderBottomWidth（有没有感觉像骆驼峰），以此类推。

obj.style.attr 等价于 obj.style["attr"]，例如 oDiv.style.width 等价于 oDiv.style["width"];

示例 1：使用 obj.style.attr

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            margin-top: 10px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <button id="btn" type="button">改变</button>
    <div id="box"></div>
    <script>
        const oBtn = document.getElementById("btn");
        const oBox = document.getElementById("box");

        oBtn.onclick = function () {
            oBox.style.backgroundColor = "lightskyblue";
        };
    </script>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当点击【改变】按钮后，页面效果如下图 2 所示。

JavaScript 操作 style 属性（1）

JavaScript 操作 style 属性（2）

分析：

点击【改变】按钮之后，我们查看浏览器控制台，如下图所示。从中可以看出，oBox.style.backgroundColor = "lightskyblue"; 这句代码本质上是在元素的 style 属性中进行设置的。

JavaScript 操作 style 属性后的 HTML 结构

对于复合属性（如 border、font 等）来说，它们设置值的方式也是一样的，例如：

oBox.style.border = "2px solid blue";

此外，如果想要为上面一个元素同时添加多个样式，比如：

width:50px;height:50px;background-color:lightskyblue;

此时用 style 来实现，就得一个个来写，实现代码如下：

oDiv.style.width = "50px";
oDiv.style.height = "50px";
oDiv.style.backgroundColor = "lightskyblue";

示例 2：使用 obj.style["attr"]

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #box{
            width:100px;
            height:100px;
            margin-top: 10px;
            background-color:hotpink;
        }
    </style>
</head>
<body>
    <p>属性：<input id="attr" type="text"></p>
    <p>取值：<input id="val" type="text"></p>
    <p><button id="btn" type="button">设置</button></p>
    <div id="box"></div>
    <script>
        const oBtn = document.getElementById("btn");
        const oBox = document.getElementById("box");

        oBtn.onclick = function () {
            // 获取两个文本框的值（也就是输入的内容）
            const attr = document.getElementById("attr").value;
            const val = document.getElementById("val").value;
            oBox.style[attr] = val;
        };
    </script>
</body>
</html>

默认情况下，页面效果如下图 1 所示。然后我们在第 1 个文本框输入 “backgroundColor”，第 2 个文本框输入 “lightskyblue”，并且点击【设置】按钮，页面效果如下图 2 所示。

JavaScript 操作 style 属性（3）

JavaScript 操作 style 属性（4）

分析：

我们从文本框获取到的值其实是一个字符串，也就是说变量 attr 和 val 都是字符串来的。因此这里是不能使用 obj.style.attr 这种方式来设置 CSS 属性，而必须使用 obj.style["attr"] 这种方式，这点小伙伴们要认真琢磨清楚。

操作类名

虽然通过修改 style 属性的方式操作 CSS 比较方便，但如果需要修改大量样式，代码会变得冗长且难以维护。此时最推荐的方式是先定义好一个 class，然后再通过 JavaScript 操作元素的 class 属性。

1. 添加类名：add()

在 JavaScript 中，我们可以使用 classList.add() 方法为一个元素添加类名。

语法：

obj.classList.add("类名")

说明：

obj 是一个 DOM 对象。classList 是 DOM 对象下的一个属性，它本质上也是一个对象。然后 classList 对象又有一个 add() 方法。

示例 3：classList.add() 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .highlight {
            font-weight: bold;
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
    <button id="btn" type="button">添加</button>
    <p id="title">绿叶网 - 为好教程，全力以赴。</p>
    <script>
        const oBtn = document.getElementById("btn");
        const oTitle = document.getElementById("title");

        oBtn.onclick = function () {
            oTitle.classList.add("highlight");
        };
    </script>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当点击【添加】按钮后，页面效果如下图 2 所示。

JavaScript classList.add() 示例效果（1）

JavaScript classList.add() 示例效果（2）

分析：

点击【添加】按钮之后，我们查看浏览器控制台，HTML 结构如下图所示。从中可以看出，“highlight” 这个类名已经添加到 p 元素的 class 属性上了。

JavaScript classList.add() 操作后的HTML结构

2. 删除类名：remove()

在 JavaScript 中，我们可以使用 classList.remove() 方法删除元素上已存在的类名。

语法：

obj.classList.remove("类名")

说明：

obj 是一个 DOM 对象。classList 是 DOM 对象下的一个属性，它本质上也是一个对象。然后 classList 对象有一个 remove() 方法。

示例 4：classList.remove() 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .highlight {
            font-weight: bold;
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
    <button id="btn" type="button">删除</button>
    <p id="title" class="highlight">绿叶网 - 为好教程，全力以赴。</p>
    <script>
        const oBtn = document.getElementById("btn");
        const oTitle = document.getElementById("title");

        oBtn.onclick = function () {
            oTitle.classList.remove("highlight");
        };
    </script>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当点击【删除】按钮后，页面效果如下图 2 所示。

JavaScript classList.remove() 示例效果（1）

JavaScript classList.remove() 示例效果（2）

分析：

点击【删除】按钮之后，我们查看浏览器控制台，HTML 结构如下图所示。从中可以看出，“highlight” 这个类名已经被删除了。

JavaScript classList.remove() 操作后的 HTML 结构

3. 切换类名：toggle()

在 JavaScript 中，我们可以使用 classList.toggle() 方法来判断元素是否包含某个类：如果包含，则移除它；如果不包含，则添加它。

toggle() 方法在实现类似 “开关” 效果时非常有用，比如点击按钮实现 “展开 / 收起” 效果。

语法：

obj.classList.toggle("类名")

说明：

obj 是一个 DOM 对象。classList 是 DOM 对象下的一个属性，它本质上也是一个对象。然后 classList 对象有一个 toggle() 方法。

示例 5：classList.toggle() 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .highlight {
            font-weight: bold;
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
    <button id="btn" type="button">切换</button>
    <p id="title">绿叶网 - 为好教程，全力以赴。</p>
    <script>
        const oBtn = document.getElementById("btn");
        const oTitle = document.getElementById("title");

        oBtn.onclick = function () {
            oTitle.classList.toggle("highlight");
        };
    </script>
</body>
</html>

默认情况下，页面效果如下图所示。

JavaScript classList.toggle() 示例

分析：

当我们第 1 次点击【切换】按钮后，此时会为 p 元素添加 “highlight” 这个 class 名。然后第 2 次点击【切换】按钮后，此时会移除 p 元素中 “highlight” 这个 class 名。然后第 3 次点击【切换】按钮后，又会为 p 元素添加 “highlight” 这个 class 名，...，以此类推。