DOM CSS

让页面"动"起来不只是改文字，还要改样式。通过 DOM 操作 CSS，可以实现点击高亮、菜单展开收起、主题切换、弹窗显隐等常见交互。方法主要有两类：修改行内样式 style 与切换类名 className。

用 style 修改单个样式

每个元素都有 style 对象，给它的属性赋值即可生效。注意：CSS 中带连字符的属性（如 background-color）要写成小驼峰 backgroundColor：

<p id="txt">普通段落</p>
<script>
  const p = document.getElementById("txt");
  p.style.color = "red";               // 文字变红
  p.style.fontSize = "20px";           // 字号变 20px
  p.style.backgroundColor = "yellow";  // 背景变黄（连字符转驼峰）
</script>

运行后段落立即变成红字、黄底、20 号字。

用 className 切换样式类

更优雅的做法：把整套样式预先写进 CSS 类，JS 只负责切换类名，样式归 CSS、逻辑归 JS，好维护：

<style>
  .highlight { color: red; background: yellow; }
</style>
<p id="txt">点按钮高亮我</p>
<button onclick="toggle()">高亮/取消</button>
<script>
  function toggle() {
    const p = document.getElementById("txt");
    p.classList.toggle("highlight"); // 有该类就删，没有就加
  }
</script>

classList 比直接拼 className 更安全好用：add() 添加、remove() 删除、contains() 判断、toggle() 切换。

显示与隐藏

最常见的样式操作是控制 display，用于"展开/收起"类交互：

<div id="box" style="display:none">隐藏的内容</div>
<button onclick="show()">显示</button>
<script>
  function show() {
    document.getElementById("box").style.display = "block";
  }
</script>

display: none 的元素不占页面空间；visibility: hidden 只是看不见但仍占位。弹窗、下拉菜单多用 display。

style.cssText 一次改多条

需要一次性设置多条样式时，可用 cssText 直接写一整段 CSS：

const box = document.getElementById("box");
box.style.cssText = "color:red; border:1px solid #000; padding:10px;";

注意：cssText 会覆盖该元素原有的全部行内样式。

样式优先级提醒

JS 设置的是行内样式，优先级高于普通 CSS 类、低于 !important 声明。想让 JS 改得动，就别给对应属性写 !important。

小结

DOM 操作 CSS 有两条路：单条微调用 style（属性名记得驼峰化），批量状态切换用 classList/className；显隐控制用 display。优先采用"切换类名"方案，让样式留在 CSS 文件、逻辑留在 JS 里。