js实现css替换
使用 JavaScript 动态替换 CSS
在 JavaScript 中替换 CSS 可以通过直接操作 DOM 元素的样式属性或动态加载外部样式表实现。以下是几种常见方法：
修改元素的 style 属性
通过直接修改 DOM 元素的 style 属性来改变样式：
const element = document.getElementById('target');
element.style.color = 'red';
element.style.fontSize = '16px';切换 class 名称
通过添加或移除 class 来应用不同的样式规则：
const element = document.getElementById('target');
element.classList.add('new-style');
element.classList.remove('old-style');插入新的 style 标签
动态创建 <style> 标签并插入到文档中：
const style = document.createElement('style');
style.innerHTML = `
.new-style {
color: blue;
background: yellow;
}
`;
document.head.appendChild(style);替换整个样式表
通过修改 <link> 标签的 href 属性来切换外部样式表：
const link = document.querySelector('link[rel="stylesheet"]');
link.href = 'new-styles.css';使用 CSSOM 操作样式规则
通过 CSS Object Model 直接操作样式表中的规则：
const sheet = document.styleSheets[0];
sheet.insertRule('body { background-color: #f0f0f0; }', sheet.cssRules.length);注意事项
- 直接修改
style属性会覆盖内联样式，优先级最高 - 修改 class 是最推荐的方式，便于维护和复用
- 动态插入大量 CSS 规则可能影响性能
- 考虑使用
requestAnimationFrame进行批量样式更新优化性能
