JS设置Style

1. 前言

在前端开发中，我们经常需要通过JavaScript来动态修改HTML元素的样式（style）。通过使用JavaScript设置样式，我们可以实现动态改变颜色、大小、位置等效果。

本文将详细介绍如何通过JavaScript设置元素的样式。

2. 修改元素的样式

通过JavaScript修改元素样式有多种方式，包括以下几种常用方法：

2.1. 使用style属性

每个HTML元素都有一个style属性，可以通过该属性来设置元素的样式。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .red-text {
      color: red;
    }
    .blue-text {
      color: blue;
    }
  </style>
</head>
<body>
  <button id="btn" onclick="changeStyle()">Change Style</button>
  <p id="text" class="red-text">This is a paragraph.</p>

  <script>
    function changeStyle() {
      var elem = document.getElementById("text");
      elem.style.color = "blue";
    }
  </script>
</body>
</html>

运行结果：
点击按钮后，段落的文本将变为蓝色。

2.2. 使用classList属性

classList是元素的一个属性，它用于操作元素的类名（class）。我们可以使用classList的add()、remove()、toggle()方法来添加、删除或切换类名。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .red-text {
      color: red;
    }
    .blue-text {
      color: blue;
    }
  </style>
</head>
<body>
  <button id="btn" onclick="toggleStyle()">Toggle Style</button>
  <p id="text" class="red-text">This is a paragraph.</p>

  <script>
    function toggleStyle() {
      var elem = document.getElementById("text");
      elem.classList.toggle("blue-text");
    }
  </script>
</body>
</html>

运行结果：
点击按钮后，段落的文本颜色将在红色和蓝色之间切换。

2.3. 使用setAttribute方法

setAttribute方法可以设置元素的任意属性，包括style属性。

示例代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <button id="btn" onclick="changeStyle()">Change Style</button>
  <p id="text" style="color: red;">This is a paragraph.</p>

  <script>
    function changeStyle() {
      var elem = document.getElementById("text");
      elem.setAttribute("style", "color: blue;");
    }
  </script>
</body>
</html>

运行结果：
点击按钮后，段落的文本将变为蓝色。

3. 修改CSS类

除了直接设置样式，我们还可以通过修改CSS类来改变元素的样式。这种方式更加灵活，能够批量修改多个元素的样式。

3.1. 添加和删除类

通过操作元素的classList属性，我们可以方便地添加和删除CSS类。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .red-text {
      color: red;
    }
    .blue-text {
      color: blue;
    }
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <button id="btn1" onclick="addStyle()">Add Style</button>
  <button id="btn2" onclick="removeStyle()">Remove Style</button>
  <p id="text" class="red-text">This is a paragraph.</p>

  <script>
    function addStyle() {
      var elem = document.getElementById("text");
      elem.classList.add("highlight");
    }

    function removeStyle() {
      var elem = document.getElementById("text");
      elem.classList.remove("red-text");
    }
  </script>
</body>
</html>

运行结果：
点击”Add Style”按钮后，段落的背景色将变为黄色，点击”Remove Style”按钮后，段落的文本颜色将恢复默认。

3.2. 替换类

classList的replace()方法可以用于替换一个类名为另一个类名。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .red-text {
      color: red;
    }
    .blue-text {
      color: blue;
    }
  </style>
</head>
<body>
  <button id="btn" onclick="replaceStyle()">Replace Style</button>
  <p id="text" class="red-text">This is a paragraph.</p>

  <script>
    function replaceStyle() {
      var elem = document.getElementById("text");
      elem.classList.replace("red-text", "blue-text");
    }
  </script>
</body>
</html>

运行结果：
点击按钮后，段落的文本颜色将从红色变为蓝色。