极客笔记CSS 使用Javascript修改CSS类
在本文中，我们将介绍如何使用Javascript修改CSS类。通过Javascript可以动态地修改元素的样式，使网页更加交互和个性化。
阅读更多：CSS 教程
使用classList属性添加和删除CSS类
首先，我们要了解一个常用的CSS类操作属性——classList。classList是一个DOM元素的属性，可以用于添加、删除、切换和查询元素的CSS类。
添加CSS类
要添加一个CSS类到一个元素中，我们可以使用add()方法。例如，假设我们有一个按钮元素，我们希望在用户点击按钮时为按钮添加一个highlight类来改变按钮的样式：
// 获取按钮元素
var button = document.getElementById("myButton");
// 添加highlight类
button.classList.add("highlight");
在上面的代码中，我们首先使用getElementById()方法获取按钮元素，然后使用classList.add()方法将highlight类添加到按钮中。
删除CSS类
要删除一个元素的CSS类，我们可以使用remove()方法。例如，我们希望在用户点击按钮时从按钮中删除highlight类：
// 获取按钮元素
var button = document.getElementById("myButton");
// 删除highlight类
button.classList.remove("highlight");
在上面的代码中，我们使用classList.remove()方法删除按钮中的highlight类。
切换CSS类
classList还提供了一个toggle()方法，可以用于切换元素的CSS类。如果元素原先没有该类，则添加该类；如果元素原先有该类，则删除该类。例如，我们希望在每次用户点击按钮时切换按钮的highlight类：
// 获取按钮元素
var button = document.getElementById("myButton");
// 切换highlight类
button.classList.toggle("highlight");
在上面的代码中，我们使用classList.toggle()方法在按钮的highlight类之间切换。
查询CSS类
classList还提供了一些查询方法，可以用于检查元素是否包含某个类。例如，我们希望在用户点击按钮时检查按钮是否具有highlight类：
// 获取按钮元素
var button = document.getElementById("myButton");
// 检查是否包含highlight类
if (button.classList.contains("highlight")) {
// 执行一些操作
}
在上面的代码中，我们使用classList.contains()方法检查按钮是否具有highlight类。
使用style属性直接修改样式
除了使用classList属性外，还可以直接通过style属性修改元素的CSS样式。
修改单个样式属性
要修改元素的单个样式属性，我们可以通过style对象的属性来实现。例如，我们希望在用户点击按钮时修改按钮的颜色为红色：
// 获取按钮元素
var button = document.getElementById("myButton");
// 修改颜色为红色
button.style.color = "red";
在上面的代码中，我们使用style.color属性将按钮的颜色修改为红色。
修改多个样式属性
要修改元素的多个样式属性，我们可以通过style对象的cssText属性来实现。cssText属性是一个字符串，可以包含一组CSS样式规则。例如，我们希望在用户点击按钮时同时修改按钮的颜色和背景色：
// 获取按钮元素
var button = document.getElementById("myButton");
// 修改颜色和背景色
button.style.cssText = "color: red; background-color: yellow;";
在上面的代码中，我们使用style.cssText属性将按钮的颜色修改为红色，背景色修改为黄色。
使用计算样式属性
除了直接修改style属性外，还可以使用getComputedStyle()方法来获取元素的计算样式。计算样式是元素最终呈现在用户界面上的样式，包括来自各种样式表和内联样式的规则。例如，我们希望获取按钮元素的计算颜色：
// 获取按钮元素
var button = document.getElementById("myButton");
// 获取计算颜色
var computedColor = window.getComputedStyle(button).color;
在上面的代码中，我们使用getComputedStyle()方法获取按钮元素的计算颜色。
示例说明
下面是一个使用Javascript修改CSS类的示例。假设我们有一个按钮和一个段落，当用户点击按钮时，切换段落的highlight类，从而改变段落的样式：
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<button id="myButton">点击切换样式</button>
<p id="myParagraph">这是一个段落</p>
<script>
// 获取按钮和段落元素
var button = document.getElementById("myButton");
var paragraph = document.getElementById("myParagraph");
// 为按钮添加点击事件监听器
button.addEventListener("click", function() {
// 切换段落的highlight类
paragraph.classList.toggle("highlight");
});
</script>
</body>
</html>
在上面的示例中，我们首先定义了一个highlight类，其中包含了一些样式规则。然后，使用JavaScript获取按钮和段落元素，并为按钮添加了一个点击事件监听器。当用户点击按钮时，通过调用paragraph.classList.toggle(“highlight”)来切换段落的highlight类，从而改变段落的样式。
总结
通过使用Javascript修改CSS类，我们可以实现动态的样式变化，使网页更具交互性和个性化。我们可以使用classList属性来添加、删除和切换CSS类，也可以直接通过style属性来修改元素的样式属性。在实际应用中，我们可以根据具体需求和情景选择合适的方法来修改元素的样式。希望本文对你理解和应用Javascript修改CSS类有所帮助！