直接操作style属性适用于单个元素的内联样式设置，需使用驼峰命名；2. 修改class属性通过classList添加、删除或切换预定义类，实现样式与行为分离；3. 动态创建style标签可全局注入CSS规则，适合主题切换；4. 使用CSSStyleSheet API能精细控制样式表，适用于动态生成大量样式。优先推荐classList，其次为内联样式或全局注入。
在JavaScript中动态添加CSS样式，有几种常见且实用的方式。你可以根据实际需求选择最合适的方法。
1. 直接操作元素的style属性
这是最直接的方式，适用于为单个元素设置少量内联样式。
通过访问元素的red">style属性，可以像写行内样式一样设置CSS：
const element = document.getElementById('myElement');
element.style.color = 'red';
element.style.fontSize = '18px';
element.style.backgroundColor = '#f0f0f0';
注意：CSS属性名需转换为驼峰命名法（如background-color → backgroundColor）。
立即学习“Java免费学习笔记（深入）”；
2. 修改元素的class属性
更推荐的做法是提前在CSS中定义好类，然后用JavaScript切换或添加类名。
/* CSS 中定义 */
.highlight {
background-color: yellow;
font-weight: bold;
}
<p>/<em> JavaScript 中使用 </em>/
const element = document.getElementById('myElement');
element.classList.add('highlight');
// 或者移除
element.classList.remove('highlight');
// 切换类
element.classList.toggle('highlight');</p>这种方法结构清晰，样式与行为分离，易于维护。
3. 动态创建并插入<style>标签
当你需要全局应用一些动态生成的样式规则时，可以创建一个<style>标签并插入到页面中。
const style = document.createElement('style');
style.textContent = `
.dynamic-style {
color: blue;
text-decoration: underline;
}
#special-item:hover {
opacity: 0.8;
}
`;
document.head.appendChild(style);
这样定义的样式会作用于整个文档，适合主题切换、动态皮肤等功能。
4. 操作CSSStyleSheet API（高级用法）
如果你想更精细地控制样式表，可以通过document.styleSheets来动态添加规则。
// 获取第一个样式表（也可以新建）
const sheet = document.styleSheets[0] || (() => {
const s = document.createElement('style');
document.head.appendChild(s);
return s.sheet;
})();
<p>// 添加一条新规则
sheet.insertRule('.new-class { color: green; padding: 10px; }', sheet.cssRules.length);</p>这种方式适合构建组件库或需要运行时生成大量样式的场景。
基本上就这些方法。对于大多数情况，优先使用classList操作预定义的CSS类；如果需要临时样式，可用style属性；若涉及全局样式注入，则考虑<style>标签或CSSStyleSheet。不复杂但容易忽略细节。
