用JS动态设置CSS样式常见方法小结(推荐)

关于用JS动态设置CSS样式的常见方法，可以有以下几种实现方式：

1. 通过 JavaScript 对样式表对象进行操作

可以获取到页面上所有的样式表的对象，通过修改其中的样式信息来实现动态设置 CSS 样式的效果。

var stylesheet = document.styleSheets[0]; // 获取样式表对象，假设是第一条样式表
var ruleIndex = stylesheet.cssRules.length;
var selector = ".example";

if (stylesheet.insertRule) { // Firefox, Chrome, etc.
  stylesheet.insertRule(selector + " { font-weight: bold; }", ruleIndex);
} else if (stylesheet.addRule) { // IE
  stylesheet.addRule(selector, "font-weight: bold;", ruleIndex);
}

代码中首先获取了所有的样式表对象中的第一条对象，并定义了一个选择器和样式规则。然后判断浏览器是否支持 insertRule 或 addRule 方法，选择性地插入样式规则。

2. 通过修改元素的 style 属性

通过修改元素的 style 属性来实现动态设置 CSS 样式的效果。

var exampleDiv = document.querySelector(".example");
exampleDiv.style.color = "red";
exampleDiv.style.fontSize = "24px";

代码中首先获取了一个 class 名为 example 的元素对象，然后通过修改它的 style 属性实现动态设置 CSS 样式的效果。

除此之外，还可以通过 jQuery 等库来动态设置 CSS 样式，例如：

$(".example").css({"color": "red", "font-size": "24px"});

这是 jQuery 中的写法，通过选择器获取到元素后，通过 css 方法来修改其样式信息。

总结一下，以上是三种常见的动态设置 CSS 样式的方法，开发者可以根据实际需求选择其中的一种来实现。