怎么使用javascript操作dom_javascript如何动态修改样式_技术教程

直接修改 element.style 仅影响行内样式，无法覆盖外部 CSS 规则（除非后者含 !important 且未被更高优先级行内样式压制）；需用驼峰命名、带单位赋值；读取时仅返回行内值，应使用 getComputedStyle() 获取最终样式；批量操作推荐 classList；动态注入样式宜用标签；伪元素样式须通过 CSS 变量或预设类名控制。

直接改 `element.style` 只影响行内样式

用 JavaScript 动态改样式最常见的方式是操作 element.style，但它只读写 HTML 元素的 style 属性（即行内样式），不会覆盖 CSS 文件或里的规则，除非后者用了 !important 且没被更高优先级的行内样式压制。

常见误区：以为 div.style.color = 'red' 能让所有匹配该 div 的 CSS 规则失效——其实只是新增了一条优先级最高的行内声明。

style 属性名要用驼峰式：backgroundColor，不是 background-color
单位不能省略：element.style.width = '200px'，写 '200' 无效
读取时只能拿到行内设置的值，getComputedStyle() 才能读最终生效样式

批量改样式用 `className` 或 `classList` 更可靠

频繁操作多个样式属性时，硬写 style.xxx 容易出错、难维护。推荐把样式抽到 CSS 类里，再用 JS 切换类名。

element.className = 'active highlight' 会完全替换原有类；更安全的是用 classList：

element.classList.add('active');
element.classList.remove('disabled');
element.classList.toggle('hidden');
element.classList.contains('error'); // true / false

classList 是现代浏览器标配（IE10+），比操作 className 字符串安全得多
避免手动拼接字符串导致重复类名或空格问题
服务端渲染或 SSR 场景*意初始类名是否已存在，toggle() 行为依赖当前状态

动态插入 CSS 规则要用 `document.styleSheets` 或

如果需要在运行时注入新样式（比如主题色切换、暗色模式适配），不能靠改单个元素的 style，得操作样式表。

最稳妥的做法是创建标签并追加到：

const style = document.createElement('style');
style.textContent = `
  .theme-dark { background: #1a1a1a; color: #eee; }
  .theme-dark button { border-color: #444; }
`;
document.head.appendChild(style);

不建议直接改 document.styleSheets[0].insertRule()，跨域样式表会触发 SecurityError
用标签方式兼容性好，也方便后续用 style.remove() 清理
若需高频切换（如实时预览），可预先定义好所有主题类，只切 document.body.className

修改伪元素样式只能靠切换类或 CSS 变量

::before、::after 这些伪元素无法用 JS 直接访问，element.style 和 getComputedStyle(element, '::before') 都只能读，不能写。

可行方案只有两个：

用 CSS 变量（custom properties）作为桥梁：
```
:root { --icon-color: blue; }
.icon::before { color: var(--icon-color); }
```
然后 JS 改 document.documentElement.style.setProperty('--icon-color', 'red')
提前写好不同状态的类（如 .icon--warning），用 classList 切换

别试图用 innerHTML 注入带伪元素的新标签——那只是复制结构，不是控制原生伪元素行为。