javascript - 使用 JavaScript 动态应用 CSS

Question

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

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

我这样做的方法是构建 CSS 并将 style 属性设置为适当的元素(很可能使用 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');

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

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

或

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

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