javascript 动态修改css样式方法汇总(四种方法)

下面我将为你详细讲解“javascript 动态修改css样式方法汇总(四种方法)”的完整攻略。

一、前言

在开发网页的过程中，涉及到动态改变元素的样式这一需求是非常常见的。比如说，鼠标悬停在一个图片上时，让图片的边框样式变成虚线；或者是在用户输入错误的情况下，将文本框的边框颜色改为红色。而针对这样的需求，javascript 中提供了多种途径来实现动态修改 css 样式的操作。本文将为大家汇总总结四种方法。

二、方法一：通过修改 style 对象

每个 DOM 元素节点都有一个 style 属性，这个属性是一个对象，它包含了该节点所有的样式属性。我们可以通过修改这个对象中的属性值来修改节点的样式。这种方法适用于需要动态改变样式的元素比较少的情况。

const box = document.querySelector(".box");
box.style.width = "200px";
box.style.height = "200px";
box.style.backgroundColor = "red";

上述代码针对一个容器节点，将其宽度、高度、背景色三个属性值都修改了。通过修改这些属性的值，就可以达到修改该节点样式的目的。

三、方法二：通过设置 class 属性

如果需要动态修改样式的元素比较多，我们可能需要在样式表中定义不同的类。这样可以通过修改元素的 class 属性来改变节点的样式。这种方法主要使用 classList 属性中提供的 add、remove 和 toggle 方法。

const box = document.querySelector(".box");
box.classList.add("big");
box.classList.remove("small");
box.classList.toggle("hidden");

上述代码针对一个元素节点，将其 class 属性中的值进行了修改。通过添加、删除和开关（toggle）可以动态地改变元素的样式类，从而实现动态修改样式的目的。需要注意的是，对应的样式表中必须存在 big、small 和 hidden 这三个类名。

四、方法三：使用 style 属性的 CSSText 属性

另外一种比较简单的方法是，我们可以使用 style 的 CSSText 属性来设置多个样式属性值。这种方法适用于需要同时修改多个样式属性的情况。

const box = document.querySelector(".box");
box.style.cssText = "width: 100px; height: 100px; background-color: blue;";

上述代码针对一个元素节点，将其宽、高、背景颜色三个属性值一起修改了。通过修改 CSSText 属性的值，可以达到改变该元素样式的目的。

五、方法四：使用 setAttribute 方法

除了以上三种方法，我们还可以使用 setAttribute 方法来动态修改元素的样式。这种方法需要设置属性名称和属性值，适用于修改驼峰式属性名的情况。

const box = document.querySelector(".box");
box.setAttribute("style", "font-size: 20px; color: green;");

上述代码针对一个元素节点，将其字体大小和颜色属性值两个都修改了。通过 setAttribute 方法，可以灵活地修改元素的属性值。

六、总结

以上四种方法都可以用来修改元素节点的样式，但各自有其适用的场景。需要根据业务需求选择合适的方法。在使用方法二和方法三时，需要事先定义好对应的样式类名和样式表。在使用方法四时，需要注意驼峰式属性名的设置。

示例说明：

<div class="box"></div>

.box {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  margin: 10px;
}

.big {
  width: 100px;
  height: 100px;
}

.small {
  width: 20px;
  height: 20px;
}

.hidden {
  display: none;
}

const box = document.querySelector(".box");
// 方法一：通过修改 style 对象
box.style.width = "200px";
box.style.height = "200px";
box.style.backgroundColor = "red";

// 方法二：通过设置 class 属性
box.classList.add("big");
box.classList.remove("small");
box.classList.toggle("hidden");

// 方法三：使用 style 属性的 CSSText 属性
box.style.cssText = "width: 100px; height: 100px; background-color: blue;";

// 方法四：使用 setAttribute 方法
box.setAttribute("style", "font-size: 20px; color: green;");

以上示例代码中，首先定义了一个 box 容器节点，并定义了初始的样式。我们在 JavaScript 中使用了四种方法对该容器节点进行了样式的修改，分别是通过修改 style 对象、设置 class 属性、使用 CSSText 属性和使用 setAttribute 方法。