当前位置：首页 > article >正文

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

article 2024/11/16 21:34:19

                    
                        
                    
                    1. 通过 JavaScript 修改内联样式 
style 属性：可以直接通过元素的 style 属性来修改元素的内联样式。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：可以访问和操作页面中的所有样式表。const styleSheet = document.styleSheets[0];  // 获取第一个样式表
const rule = styleSheet.cssRules[0];  // 获取第一个规则
console.log(rule.selectorText);  // 输出选择器
 
插入和删除样式规则： 
  使用 insertRule 方法插入新的样式规则。
使用 deleteRule 方法删除现有的样式规则。
 styleSheet.insertRule("body { background-color: yellow; }", styleSheet.cssRules.length);  // 插入新规则
styleSheet.deleteRule(0);  // 删除第一个规则
 
 
3. 使用 JavaScript 创建和添加新的样式表 
可以通过 JavaScript 创建新的 <style> 元素，并将其插入到文档中。const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = 'body { font-size: 20px; }';
document.head.appendChild(style);  // 将样式添加到文档头部
 
 
4. CSS 变量的使用与操作 
CSS 变量：可以使用 JavaScript 动态修改 CSS 变量，从而改变多个样式属性。document.documentElement.style.setProperty('--main-color', 'green');  // 设置 CSS 变量
const color = getComputedStyle(document.documentElement).getPropertyValue('--main-color');  // 获取变量值
 
全局变量与局部变量：全局 CSS 变量通常定义在 :root 伪类中，局部变量可以在特定元素或选择器中定义。
 
5. 响应式和动态样式的管理 
窗口大小变化的响应：可以通过监听 window.resize 事件，并根据窗口大小动态调整样式。window.addEventListener('resize', () => {
  if (window.innerWidth < 600) {
    document.body.style.backgroundColor = 'lightblue';
  } else {
    document.body.style.backgroundColor = 'lightgreen';
  }
});
 
媒体查询的匹配：使用 window.matchMedia 来检测和响应媒体查询的变化。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 的过渡和动画效果。const element = document.getElementById("animateElement");
element.classList.add("animate");  // 触发动画
// 或者通过修改样式来触发过渡
element.style.transition = "all 2s";
element.style.transform = "translateX(100px)";
 
监听动画事件：可以通过事件监听器捕捉动画的开始、结束和中止事件。element.addEventListener('transitionend', () => {
  console.log('Transition ended');
});
 
 
7. 动态加载和卸载样式表 
动态加载：可以通过创建 <link> 元素并将其添加到 <head> 中，来动态加载外部 CSS 样式表。const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';
document.head.appendChild(link);
 
卸载样式表：可以通过移除 <link> 元素来卸载样式表。document.head.removeChild(link);
 
 
8. 使用 JavaScript 控制类名 
添加和删除类名：可以使用 classList 对象的方法来操作元素的类名，从而改变元素的样式。const element = document.getElementById('myElement');
element.classList.add('newClass');  // 添加类名
element.classList.remove('oldClass');  // 删除类名
element.classList.toggle('toggleClass');  // 切换类名
 
检查类名：可以使用 classList.contains 方法来检查元素是否具有某个类名。if (element.classList.contains('active')) {
  console.log('Element is active');
}
 
 
9. 获取计算样式 
getComputedStyle：可以使用 window.getComputedStyle 来获取元素的计算样式，这些样式是最终应用于元素上的所有样式的结合。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 表示的是内容信息。两者结合实现了内容与样式的动态交互。

                