正如你在前面的章节中所看到的，元素的属性可以通过 JavaScript 进行修改。两个影响元素可视表现的属性是 class 和 style，它们包含 CSS 代码。

<!DOCTYPE html>
<html>
<head>
  <script>
  function toggle() {
    "use strict";
    // ...
  }
  </script>
  <style>
    .divClassGreen {
      background-color: green;
      padding: 2em;
      margin: 1em;
    }
    .divClassRed {
      background-color: red;
      padding: 2em;
      margin: 1em;
    }
  </style>
</head>

<body id="body">
  <div id="div_1" class="divClassGreen">A DIV element</div>
  <div id="div_2" style="background-color: blue; padding: 2em; margin: 1em">Another DIV element</div>
  <button id="buttonToggle" onclick="toggle()" style="margin:1em 0em 1em 0em">Start</button>
</body>
</html>

class 属性标识在 HTML 的 style 元素中创建的 CSS 类，而 style 属性定义了内联的 CSS 规则（本地）。

要修改它们，可以像处理其他属性一样处理它们。它们没有特殊规则或例外。

示例

我们使用上面的 HTML 文件，仅修改 JavaScript 函数。当点击按钮时，函数将 CSS 类 divClassRed 分配给 div_1，并将 div_2 的内联 style 属性更改为不同的值。

function toggle() {
  "use strict";

  // 定位需要更改的元素  
  const div_1 = document.getElementById("div_1");
  const div_2 = document.getElementById("div_2");

  // 修改 'class' 属性
  div_1.setAttribute("class", "divClassRed");

  // 内联修改
  div_2.setAttribute("style", "background-color: silver; padding: 4em; margin: 2em");
  // 或者：div_2.style = "background-color: silver; padding: 4em; margin: 2em";
}

style 属性存储 CSS 属性，如 color 或 padding，并且具有自己的属性。这符合 JavaScript 对象的一般规则。因此，下面的语法与之前的 div_2.setAttribute 调用是等效的。

div_2.style.backgroundColor = "silver"; // 见下文：驼峰命名法
div_2.style.padding = "4em";
div_2.style.margin = "2em";

style 的属性

在 CSS 中，一些属性的名称包含连字符，例如 background-color 或 font-size。当你在 JavaScript 中使用它们时，作为 style 属性的一部分，它们的名称会有所变化。连字符后的字符必须大写，并且连字符会消失：style.backgroundColor 或 style.fontSize。这种写法叫做驼峰命名法（camel-case）。

div_1.style.fontSize = "2em"; // 设置字体大小作为 'style' 属性
/*
以下行会导致语法错误，因为连字符会被解释为减法运算符。
div_1.style.font-size = "2em";
*/

在 CSS 中的其他地方，这些名称不发生变化。特别是在 HTML <style> 元素中显示的语法，或者作为内联定义使用时，连字符语法保持不变。

Last modified: Monday, 13 January 2025, 3:11 PM