使用JavaScript动态应用CSS

Question

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

我正在寻找一种方法来将JavaScript小部件(JS,CSS和标记)打包在一个组件中(基本上是一个对象).我们的想法是让组件封装样式(因此用户可以使用一个很好的API来修改它,而不是直接修改CSS并间接应用更改的更紧密耦合的方法).问题是单个API调用可能意味着对几个样式元素的更改.

我这样做的方法是构造CSS并将styleatrribute设置为适当的元素(最有可能使用ID来避免将更改应用于标记的其他区域).这是一个好的解决方案吗？有没有更好的方法呢？

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');

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

Answer 2

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

如果您想将名为animate的CSS 类添加到 Id 为circle的元素，请按如下操作。

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

您可以像这样删除该类。

circle.classList.remove('animate');

Answer 3

我要做的方法是构造CSS并将style属性设置为适当的元素。例如：

var div = document.createElement('div');
div.setAttribute("style", "color: blue, margin-top:5px");
document.body.appendChild(div);

这段代码将使用该样式创建一个新的div元素，color: blue, margin-top:5px并将其添加到页面中。