JS设置CSS样式的方式汇总

关于“JS设置CSS样式的方式汇总”的完整攻略，以下是我的观点：

1. 通过style属性直接设置

在JavaScript代码中，您可以使用元素的style属性来直接更改CSS样式。这种方式的优点是简单快捷，缺点是不适用于更复杂的样式更改。示例代码如下：

let element = document.getElementById("myElement");
element.style.color = "red";
element.style.fontSize = "20px";

以上代码将元素myElement的文本颜色更改为红色，并将字体大小更改为20像素。

2. 通过classList来更改类

您可以使用classList属性在JavaScript代码中添加、删除或切换CSS类。这种方式的好处是您可以为元素定义复杂的CSS样式，然后在代码中更改它们。示例代码如下：

let element = document.getElementById("myElement");
element.classList.add("myClass");
element.classList.remove("anotherClass");
element.classList.toggle("highlight");

以上代码在元素myElement上添加了一个类myClass，删除了另一个类anotherClass，切换了highlight类。

3. 更改行内样式

除了使用style属性之外，您还可以使用setAttribute方法直接更改元素的行内样式。此方法将设置元素的style属性并覆盖它的所有现有CSS样式。示例代码如下：

let element = document.getElementById("myElement");
element.setAttribute("style", "color: red; font-size: 20px;");

以上代码将元素myElement的文本颜色更改为红色，并将字体大小更改为20像素。

4. 使用CSS变量

从CSS3开始，您可以使用变量来定义您的CSS样式，并在JavaScript代码中更改它们。这种方式的好处是可以在代码中动态更改更复杂的样式。示例代码如下：

CSS样式表：

:root {
  --my-color: black;
  --my-font-size: 16px;
}

#myElement {
  color: var(--my-color);
  font-size: var(--my-font-size);
}

JavaScript代码：

let element = document.getElementById("myElement");
element.style.setProperty("--my-color", "red");
element.style.setProperty("--my-font-size", "20px");

以上代码将元素myElement的文本颜色更改为红色，并将字体大小更改为20像素。