DOM 更改 CSS

使用 JavaScript 更改 HTML 元素的样式也是常见的操作，HTML DOM 提供了更改 HTML 元素的样式的方法。

更改元素样式

要更改 HTML 元素的样式，请使用以下语法：

element.style.property = propertyValue;

以下示例更改 <p> 元素的文字颜色为蓝色：

<html>
  <body>
    <p id="p2">Hello World!</p>

    <script>
      document.getElementById("p2").style.color = "blue";
    </script>
  </body>
</html>

更改元素的类

有时候，使用上面的方法更改元素的样式太过于繁琐，我们可以直接更改元素 class 属性来应用对应的 css 类样式。

设置元素 class 的语法如下：

element.className = className;

由于 class 是 JavaScript 保留字，这里使用 className 属性设置元素的 css 类。

下面的例子为 p 元素添加两个 css 类：

<html>
  <head>
    <style>
      .blue {
        color: blue;
      }
      .large {
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <p id="p2">Hello World!</p>
    <button onclick="document.getElementById('p2').className='blue large'">更改样式</button>
    <button onclick="document.getElementById('p2').className=''">还原样式</button>
  </body>
</html>

DOM 更改 CSS

更改元素样式

更改元素的类

目录