CSS是我们网页中常用的样式表语言，它可以让我们轻松地控制元素的外观和布局。但是在某些情况下，我们需要使用JavaScript来动态地修改CSS属性，这时候就需要使用一些特定的方法和技巧。
通过JavaScript获取和修改CSS属性
我们可以使用window.getComputedStyle()方法来获取一个元素的计算样式。该方法返回一个对象，其中包含了该元素所有计算后的样式属性及其对应的值。例如，以下代码段获取了一个ID为"myElement"的元素的背景颜色：
const element = document.getElementById("myElement");
const style = window.getComputedStyle(element);
const backgroundColor = style.getPropertyValue("background-color");要修改CSS属性，我们可以使用以下代码：
element.style.propertyName = "value";
例如，以下代码将修改上面获取到的元素的背景颜色：
element.style.backgroundColor = "red";
注意，我们直接操作了元素的style属性，而不是操作计算后的样式。
通过类名添加和移除CSS类
另一种常见的方式是通过添加或移除CSS类来修改样式。我们可以使用以下代码来添加一个类：
element.classList.add("className");移除一个类同样简单：
element.classList.remove("className");还可以使用以下代码切换一个类：
element.classList.toggle("className");使用jQuery来修改CSS属性
如果您使用了jQuery库，那么可以使用其提供的.css()方法来方便地获取和修改元素的CSS属性。以下是一些示例代码：
// 获取背景颜色
const backgroundColor = $("#myElement").css("background-color");
// 修改背景颜色
$("#myElement").css("background-color", "red");总结
在本文中，我们介绍了通过JavaScript动态修改CSS属性的方法和技巧。我们可以使用window.getComputedStyle()方法来获取计算后的样式属性，也可以直接操作元素的style属性来修改样式。另外，我们还介绍了通过添加、移除和切换CSS类来修改样式的方法。这些技术和方法能够帮助我们更好地控制和修改元素的样式，从而实现更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11034
