JS动态添加CSS样式方法大全
时间：2025-08-06 11:10:00 340浏览 收藏
文章不知道大家是否熟悉？今天我将给大家介绍《JS动态添加CSS样式的方法有多种，以下是几种常见的实现方式：1. 通过 document.styleSheets 添加样式（不推荐）这种方式较为复杂，因为直接操作 styleSheets 需要处理多个层级，并且浏览器兼容性较差。const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
.my-class {
color: red;
}
`;
document.head.appendChild(style);2. 使用 createElement('style') 动态创建样式表（推荐）这是最常见、最简单的方式，适用于大多数场景。const style = document.createElement('style');
style.type = 'text/css';
style.sheet.insertRule('.my-class { color: red; }', 0);
document.head.appendChild(style);注意：insertRule() 方法在某些浏览器中可能需要使用 cssText 属性来设置样式内容。3. 通过 element.style 直接修改元素样式（局部）如果你只是想为某个特定的 DOM 元素添加样式，可以直接使用 element.style。const el = document.getElementById('myElement');
el.style.color = 'blue';
el.style.fontSize = '20px';4. **使用 classList.add() 或 classList.remove() 操作类名（推荐》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！
动态添加CSS样式主要有四种方法：直接修改元素的style属性、通过classList API增删类名、动态创建并插入