js 动态添加css样式|极客笔记

js 动态添加css样式

在网页开发中，通常会用到CSS来控制页面的样式，包括布局、颜色、字体等。有时候我们需要在页面加载完成后动态地添加一些CSS样式，来实现特定的效果。这时候就可以使用JavaScript来动态添加CSS样式。

为什么需要动态添加CSS样式

动态添加CSS样式可以带来一些好处，比如：

响应用户交互：根据用户的操作实时改变页面样式。
节省带宽：只有需要的样式会被加载，避免一开始就加载所有可能用到的样式。
解决兼容性问题：可以根据不同浏览器动态添加不同的样式。

如何动态添加CSS样式

在JavaScript中动态添加CSS样式主要有两种方法：一种是直接操作元素的style属性，另一种是通过创建style元素来添加CSS规则。下面分别介绍这两种方法。

直接操作元素的style属性

这种方法适用于需要实时改变一个或多个元素的样式。可以通过JavaScript获取元素并设置其style属性来动态改变样式。

// 获取需要操作的元素
const element = document.getElementById('myElement');

// 设置元素的样式
element.style.color = 'red';
element.style.fontSize = '20px';

在上面的代码中，我们首先获取id为myElement的元素，然后通过设置style属性来改变元素的文字颜色和字体大小。

创建style元素添加CSS规则

如果需要添加一段CSS规则来控制页面的样式，可以通过创建一个style元素，并将要添加的CSS规则放入其中。

// 创建style元素
const style = document.createElement('style');
document.head.appendChild(style);

// 添加CSS规则
style.sheet.insertRule(".myClass { color: blue; font-size: 16px; }", 0);

在上面的代码中，我们首先创建了一个style元素，并将其添加到head元素中。然后使用insertRule()方法在style元素中插入一条CSS规则，控制类名为myClass的元素的文本颜色和字体大小。

示例应用

下面通过一个简单的示例来演示如何动态添加CSS样式。假设我们有一个按钮，点击按钮时改变一个div元素的样式。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic CSS</title>
<style>
    .myDiv {
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
</head>
<body>

<div class="myDiv"></div>
<button id="myButton">Change Style</button>

<script>
    const button = document.getElementById('myButton');
    const div = document.querySelector('.myDiv');

    button.addEventListener('click', function() {
        div.style.backgroundColor = 'blue';
        div.style.width = '300px';
        div.style.height = '300px';
    });
</script>

</body>
</html>

在上面的示例中，我们通过点击按钮来改变div元素的背景颜色和大小。点击按钮后，div元素的背景色变为蓝色，宽高变为300px。