JS新增CSS样式

在网页开发中，我们经常需要对页面的样式进行动态的修改，而这时就需要用到JavaScript动态地修改CSS样式。本文将详细介绍如何使用JavaScript来新增CSS样式，以实现网页样式的动态修改。

1. getElementById获取元素

在使用JavaScript新增CSS样式时，首先需要获取到需要修改样式的元素。通常我们会使用document.getElementById()方法来获取元素对象。下面是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS新增CSS样式</title>
<style>
#demo {
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>
</head>
<body>

<div id="demo">这是一个DIV元素</div>

<script>
var element = document.getElementById("demo");
console.log(element);
</script>

</body>
</html>

在这个示例中，我们首先定义了一个<div>元素，设置了一个id为demo，并通过getElementById()方法获取到这个元素对象，然后通过console.log()输出到控制台，运行结果如下：

<div id="demo">这是一个DIV元素</div>

2. style属性设置样式

获取到元素对象之后，我们可以通过其style属性来设置CSS样式。style属性是一个对象，可以直接为其设置CSS属性。下面是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS新增CSS样式</title>
<style>
#demo {
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>
</head>
<body>

<div id="demo">这是一个DIV元素</div>

<script>
var element = document.getElementById("demo");
element.style.backgroundColor = "blue";
element.style.color = "white";
</script>

</body>
</html>

在这个示例中，我们获取到了id为demo的<div>元素对象，并通过其style属性分别设置了backgroundColor和color样式，将背景色修改为蓝色，文字颜色修改为白色，运行结果如下：

这是一个DIV元素

3. classList属性添加类名

除了直接设置CSS样式外，我们还可以通过classList属性来添加类名，从而实现对元素的样式修改。通过添加类名，我们可以在CSS样式表中定义好相应的样式，然后通过JavaScript来动态地添加和移除这些类名。下面是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS新增CSS样式</title>
<style>
.blue-background {
    background-color: blue;
}

.white-text {
    color: white;
}
</style>
</head>
<body>

<div id="demo">这是一个DIV元素</div>

<button onclick="addStyle()">添加样式</button>
<button onclick="removeStyle()">移除样式</button>

<script>
var element = document.getElementById("demo");

function addStyle() {
    element.classList.add("blue-background");
    element.classList.add("white-text");
}

function removeStyle() {
    element.classList.remove("blue-background");
    element.classList.remove("white-text");
}
</script>

</body>
</html>

在这个示例中，我们定义了两个类名.blue-background和.white-text，分别用于设置背景色和文字颜色。然后通过JavaScript的classList属性，我们可以动态地为元素添加和移除这些类名，从而改变元素的样式。点击“添加样式”按钮后，元素的背景色将变为蓝色，文字颜色变为白色，点击“移除样式”按钮后，样式将恢复初始状态。

4. style.cssText属性设置多个样式

如果需要设置多个样式，我们还可以使用style.cssText属性，通过一次性设置多个CSS属性。下面是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS新增CSS样式</title>
</head>
<body>

<div id="demo">这是一个DIV元素</div>

<button onclick="changeStyle()">改变样式</button>

<script>
var element = document.getElementById("demo");

function changeStyle() {
    element.style.cssText = "background-color: green; color: yellow; font-size: 20px;";
}
</script>

</body>
</html>

在这个示例中，我们通过style.cssText属性一次性设置了背景色、文字颜色和字体大小三个样式，点击“改变样式”按钮后，元素的样式将一次性被修改为绿色背景、黄色文字和20px字体大小。

5. 使用setAttribute方法设置行内样式

除了直接使用style属性外，我们还可以使用setAttribute()方法来设置元素的行内样式。这种方法更加灵活，可以动态地设置任意的CSS属性。下面是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS新增CSS样式</title>
</head>
<body>

<div id="demo">这是一个DIV元素</div>

<button onclick="setStyle()">设置样式</button>

<script>
var element = document.getElementById("demo");

function setStyle() {
    element.setAttribute("style", "background-color: purple; color: orange; font-size: 24px;");
}
</script>

</body>
</html>

在这个示例中，我们使用setAttribute()方法来设置元素的行内样式，与style属性类似，但是更加灵活，可以直接设置一段CSS样式字符串。点击“设置样式”按钮后，元素的样式将被修改为紫色背景、橙色文字和24px字体大小。