js实现css
在JavaScript中实现CSS操作
JavaScript可以通过多种方式动态操作CSS样式，以下是常见的方法：
通过style属性修改内联样式
直接通过元素的style属性修改内联样式是最直接的方式：
const element = document.getElementById('myElement');
element.style.color = 'red';
element.style.backgroundColor = '#f0f0f0';
element.style.fontSize = '16px';对于带有连字符的CSS属性，需要使用驼峰式命名：
element.style.marginTop = '10px';
element.style.zIndex = '100';通过classList操作类名
通过添加/移除CSS类来批量修改样式：
const box = document.querySelector('.box');
box.classList.add('active'); // 添加类
box.classList.remove('old'); // 移除类
box.classList.toggle('hidden'); // 切换类修改样式表规则
直接操作样式表规则：
const styleSheet = document.styleSheets[0];
styleSheet.insertRule('.newClass { color: blue; }', 0);
styleSheet.deleteRule(0);使用CSSStyleSheet API
更高级的样式表操作：
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
.dynamic {
padding: 20px;
border: 1px solid black;
}
`);
document.adoptedStyleSheets = [sheet];动态创建style标签
向文档中注入新的样式：
const style = document.createElement('style');
style.textContent = `
body {
background-color: lightblue;
}
`;
document.head.appendChild(style);获取计算样式
获取元素最终应用的计算样式：
const element = document.getElementById('myDiv');
const styles = window.getComputedStyle(element);
console.log(styles.getPropertyValue('width'));使用CSS自定义属性
操作CSS变量：
const root = document.documentElement;
root.style.setProperty('--main-color', '#1a1a1a');
const color = root.style.getPropertyValue('--main-color');注意事项
- 直接修改style属性会覆盖内联样式，但不影响样式表定义的规则
- 性能考虑：频繁操作DOM样式会影响性能，建议批量修改或使用classList
- 现代框架通常提供自己的样式处理方案，如React的styled-components
以上方法可以根据具体需求选择使用，组合运用可以实现复杂的动态样式效果。
