JS中【CSS脚本化】十个方面解读

1. 通过 JavaScript 修改内联样式

style 属性 ：可以直接通过元素的 style 属性来修改元素的内联样式。

javascript 复制代码

const element = document.getElementById("myElement");
element.style.color = "red";  // 修改文字颜色为红色
element.style.backgroundColor = "blue";  // 修改背景颜色为蓝色

属性名称的处理 ：JavaScript 中的 CSS 属性名使用驼峰命名法（camelCase），而不是在 CSS 中的中划线形式。例如，background-color 在 JavaScript 中对应 backgroundColor。

2. 操作外部或嵌入的 CSS 样式

通过 document.styleSheets ：可以访问和操作页面中的所有样式表。

javascript 复制代码

const styleSheet = document.styleSheets[0];  // 获取第一个样式表
const rule = styleSheet.cssRules[0];  // 获取第一个规则
console.log(rule.selectorText);  // 输出选择器

插入和删除样式规则 ：

使用 insertRule 方法插入新的样式规则。
使用 deleteRule 方法删除现有的样式规则。

javascript 复制代码

styleSheet.insertRule("body { background-color: yellow; }", styleSheet.cssRules.length);  // 插入新规则
styleSheet.deleteRule(0);  // 删除第一个规则

3. 使用 JavaScript 创建和添加新的样式表

可以通过 JavaScript 创建新的 <style> 元素，并将其插入到文档中。

javascript 复制代码

const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = 'body { font-size: 20px; }';
document.head.appendChild(style);  // 将样式添加到文档头部

4. CSS 变量的使用与操作

CSS 变量 ：可以使用 JavaScript 动态修改 CSS 变量，从而改变多个样式属性。

javascript 复制代码

document.documentElement.style.setProperty('--main-color', 'green');  // 设置 CSS 变量
const color = getComputedStyle(document.documentElement).getPropertyValue('--main-color');  // 获取变量值

全局变量与局部变量 ：全局 CSS 变量通常定义在 :root 伪类中，局部变量可以在特定元素或选择器中定义。

5. 响应式和动态样式的管理

窗口大小变化的响应 ：可以通过监听 window.resize 事件，并根据窗口大小动态调整样式。

javascript 复制代码

window.addEventListener('resize', () => {
  if (window.innerWidth < 600) {
    document.body.style.backgroundColor = 'lightblue';
  } else {
    document.body.style.backgroundColor = 'lightgreen';
  }
});

媒体查询的匹配 ：使用 window.matchMedia 来检测和响应媒体查询的变化。

javascript 复制代码

const mediaQuery = window.matchMedia('(max-width: 600px)');
mediaQuery.addEventListener('change', (e) => {
  if (e.matches) {
    console.log('Viewport is 600px or less');
  } else {
    console.log('Viewport is greater than 600px');
  }
});

6. 动画和过渡效果的控制

通过 JavaScript 触发 CSS 动画和过渡 ：可以动态添加或移除类，或者直接修改样式属性来触发 CSS 的过渡和动画效果。

javascript 复制代码

const element = document.getElementById("animateElement");
element.classList.add("animate");  // 触发动画
// 或者通过修改样式来触发过渡
element.style.transition = "all 2s";
element.style.transform = "translateX(100px)";

监听动画事件 ：可以通过事件监听器捕捉动画的开始、结束和中止事件。
javascript 复制代码
```
element.addEventListener('transitionend', () => {
  console.log('Transition ended');
});
```

7. 动态加载和卸载样式表

动态加载 ：可以通过创建 <link> 元素并将其添加到 <head> 中，来动态加载外部 CSS 样式表。
javascript 复制代码
```
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';
document.head.appendChild(link);
```
卸载样式表 ：可以通过移除 <link> 元素来卸载样式表。
javascript 复制代码
```
document.head.removeChild(link);
```

8. 使用 JavaScript 控制类名

添加和删除类名 ：可以使用 classList 对象的方法来操作元素的类名，从而改变元素的样式。

javascript 复制代码

const element = document.getElementById('myElement');
element.classList.add('newClass');  // 添加类名
element.classList.remove('oldClass');  // 删除类名
element.classList.toggle('toggleClass');  // 切换类名

检查类名 ：可以使用 classList.contains 方法来检查元素是否具有某个类名。
javascript 复制代码
```
if (element.classList.contains('active')) {
  console.log('Element is active');
}
```

9. 获取计算样式

getComputedStyle ：可以使用 window.getComputedStyle 来获取元素的计算样式，这些样式是最终应用于元素上的所有样式的结合。
javascript 复制代码
```
const computedStyle = window.getComputedStyle(element);
console.log(computedStyle.backgroundColor);  // 获取计算后的背景颜色
```

10. CSSOM (CSS Object Model) 的概念

CSSOM 是 Document Object Model (DOM) 的扩展，它用于表示 CSS 样式表及其规则。可以通过 CSSOM 动态访问和操作 CSS。
CSSOM 与 DOM 的关系：CSSOM 表示的是样式信息，DOM 表示的是内容信息。两者结合实现了内容与样式的动态交互。