使用 JavaScript 动态应用 CSS

Question

使用 JavaScript 将样式动态应用（即样式的值在运行时创建）到 HTML 元素的好方法是什么？

我正在寻找一种将 JavaScript 小部件（JS、CSS 和标记）打包到单个组件（基本上是一个对象）中的方法。这个想法是让组件封装样式（因此用户有一个很好的 API 来修改它，而不是直接修改 CSS 并间接应用更改的更紧密耦合的方法）。问题在于单个 API 调用可能意味着对多个样式元素的更改。

我这样做的方法是构造 CSS 并将 style 设置为适当的元素（很可能使用 ID 来避免将更改应用到标记的其他区域）。这是一个好的解决方案吗？有更好的方法吗？

原文由 Juan Carlos Coto 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 Jquery

使用 css() 函数将样式应用于您传递包含样式的对象的现有元素：

 var styles = {
  backgroundColor : "#ddd",
  fontWeight: ""
};
$("#myId").css(styles);

您还可以一次应用一种样式：

 $("#myId").css("border-color", "#FFFFFF");

香草JS：

 var myDiv = document.getElementById("#myId");
myDiv.setAttribute("style", "border-color:#FFFFFF;");

使用 CSS：

您还可以使用一个单独的 css 文件，其中包含类内部所需的不同样式，并根据上下文向您的元素添加或删除这些类。

在你的 css 文件中你可以有类似的类

.myClass {
    background-color: red;
}

.myOtherClass {
    background-color: blue;
}

再次使用 jquery，向元素添加或删除类，您可以使用

$("#myDiv").addClass('myClass');

或者

$("#myDiv").removeClass('myClass');

同样，你也可以用 vanilla JS 做同样的事情：

 document.getElementById("#myId").classList.add('myClass')

或者

document.getElementById("#myId").classList.remove('myClass')

我认为这是一种更简洁的方式，因为它将您的风格与您的逻辑分开。但是，如果您的 css 值取决于服务器返回的内容，则此解决方案可能难以应用。

原文由 kerwan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 Vanilla JS 你可以做这样的事情。

如果要将名为 animate 的 CSS 类 添加到 ID 为 circle 的元素，请按如下方式进行。

 var circle = document.getElementById("circle");
circle.classList.add('animate');

您可以像这样删除类。

 circle.classList.remove('animate');

原文由 Rahul kalivaradarajalu 发布，翻译遵循 CC BY-SA 4.0 许可协议