JS动态操控CSS样式：赋予网页无限生机

1. 获取和设置样式

1.1 获取CSS样式

我们可以使用window.getComputedStyle()方法获取元素的所有计算样式（包括浏览器默认样式、外部样式表、内联样式以及CSSOM修改过的样式）：

let element = document.getElementById('myElement'); let style = window.getComputedStyle(element); console.log(style.getPropertyValue('color')); // 获取颜色值

1.2 设置CSS样式

直接操作DOM元素的style属性可以设置内联样式：

element.style.color = 'red'; // 设置颜色为红色 element.style.backgroundColor = 'blue'; // 设置背景色为蓝色

对于非行内样式或者需要添加多个样式时，可以创建并应用新的CSSRule：

let sheet = document.styleSheets[0]; // 获取样式表 let rule = `#myElement { color: green; }`; sheet.insertRule(rule, sheet.cssRules.length); // 插入新规则

2. 动态切换CSS类

通过JavaScript切换CSS类名是一种更方便且结构清晰的方式来动态改变样式：

element.classList.add('active'); // 添加类 element.classList.remove('inactive'); // 移除类 element.classList.toggle('visible'); // 切换类

配合CSS预设好的类，可以实现复杂的动画效果或状态变化。

3. 使用CSS Variables（CSS自定义属性）

CSS变量让JavaScript对CSS样式的控制更为强大和灵活：

element.style.setProperty('--main-color', 'purple'); // 设置CSS变量

然后在CSS中引用这个变量：

#myElement {  color: var(--main-color); }

这样一来，只需更改JavaScript中的变量值，整个页面的相关样式都会随之改变。