JavaScript 动态修改 HTML 元素样式与属性详解

通过 Style 对象修改 CSS 样式

要改变 HTML 元素的显示样式（如颜色、字体大小、背景色等），最直接的方式是通过 style 属性对象进行赋值。这种方法会直接修改元素的行内样式（Inline Styles），优先级较高。

第1步：获取目标元素引用

首先，必须通过 document.getElementById() 或其他选择器方法找到需要修改的 DOM 节点。只有拥有元素引用，才能对其属性进行操作。

第2步：设置具体样式属性

获取元素后，访问其 style 属性并赋值。注意 CSS 属性名中的连字符需转换为驼峰命名法（例如 background-color 变为 backgroundColor，font-size 变为 fontSize）。

<p id="demo">Hello World!</p>
<script>
  // 获取 ID 为 demo 的段落元素
  const element = document.getElementById("demo");
  
  // 修改文本颜色为蓝色
  element.style.color = "blue";
  
  // 修改字体大小为 18px
  element.style.fontSize = "18px";
</script>

此方法的优点是直观、生效快。缺点是如果频繁修改不同样式，维护多个 style.xxx 赋值可能使代码显得冗长，且覆盖原有外部 CSS 定义时需注意优先级问题。

通过 setAttribute 修改元素属性

除了视觉样式，我们常需要改变元素的非视觉属性，如 class、id、href 或自定义属性（data-*）。推荐使用标准的 setAttribute() 方法。

第1步：定位 DOM 元素

同样需要先获取对目标元素的引用。以下示例针对一个 div 元素。

第2步：调用 setAttribute 设置新值

使用 element.setAttribute(attributeName, attributeValue)。第一个参数是属性名称（字符串），第二个参数是要设置的属性值（字符串）。

<div id="myDiv" class="old-class">Content</div>
<script>
  var div = document.getElementById('myDiv');
  
  // 将 class 属性改为 new-class
  div.setAttribute("class", "new-class");
  
  // 或者添加 data-type 属性
  div.setAttribute("data-type", "article");
</script>

重要提示：

• className vs class： 虽然 setAttribute("class", ...) 可以工作，但在某些旧浏览器或特殊场景下，建议直接使用 element.className = "..." 来操作类名，这通常更符合 DOM 规范预期。
• 替代方案 addClass： 如果需要保留原有的 class 并仅追加新类名，不要直接用 setAttribute 覆盖，而应检查现有的 className 或使用现代浏览器的 classList.add() 方法。

样式与属性操作的对比与总结

在实际开发中，区分“样式”与“属性”有助于写出更规范的代码。

结合这两类操作，你可以灵活应对复杂的网页交互需求。例如，当用户点击按钮时，既可以切换元素的 class 以应用新的主题样式块，也可以动态更新图像标签的 src 属性以更换内容。