js怎么修改css样式

修改CSS样式的方式

在JavaScript中，我们可以通过多种方式来动态修改CSS样式。我们可以直接使用Element.style属性，或者使用classList属性来添加或删除样式类名，也可以使用getComputedStyle方法来获取计算样式。

使用Element.style属性修改CSS样式

Element.style属性是一个对象，包含有所有可读写的样式属性。我们可以使用该属性来动态修改元素的CSS样式。

  const elem = document.getElementById("example");
  elem.style.backgroundColor = "red";

使用classList属性添加或删除样式类名

元素可以比较方便地使用class属性添加或访问多个CSS类名。一旦访问了元素的classList属性，就可以使用add()方法来添加一个类名，使用remove()方法删除一个类名，使用toggle()方法在类之间切换。

  const elem = document.getElementById("example");
  elem.classList.add("active");
  elem.classList.remove("inactive");
  elem.classList.toggle("focused");

使用getComputedStyle方法获取计算样式

getComputedStyle方法返回一个 CSSStyleDeclaration 对象，包含指定元素的计算样式。通过使用该方法我们可以获取元素的最终样式。

  const elem = document.getElementById("example");
  const style = window.getComputedStyle(elem);
  const backgroundColor = style.getPropertyValue("background-color");
  console.log(backgroundColor);

总结

通过使用JavaScript，我们可以获取和修改元素的CSS样式。使用Element.style属性，classList属性或getComputedStyle方法，都可以轻松实现对元素样式的操作。