添加样式对象 js - CSS

当我们需要修改网页的样式时，通常会用到 CSS 样式表。但是，有时候我们也可以直接使用 JavaScript 在 DOM 上操作样式，这就是 “添加样式对象 js - CSS” 的主题。

直接操作样式属性

我们可以使用 JavaScript 获取 DOM 元素，并直接操作它的样式属性。比如，修改元素的背景色：

var element = document.querySelector("#some-element");
element.style.backgroundColor = "red";

在这个例子中，我们首先使用 document.querySelector 获取 ID 为 some-element 的 DOM 元素，然后使用 element.style.backgroundColor 直接修改它的 background-color 样式属性。

使用样式对象

我们也可以使用 JavaScript 创建一个样式对象，并把它添加到文档中。比如，创建一个 CSS 类，把它的样式添加进样式对象，最后把样式对象添加到文档中：

var style = document.createElement("style");
document.head.appendChild(style);

var classStyle = document.createTextNode(".some-class { background-color: red }");
style.appendChild(classStyle);

在这个例子中，我们首先创建一个样式对象 style，然后把它添加到文档中。接着，我们创建一个文本节点 classStyle，它包含了我们要创建的 CSS 类的样式信息。最后，我们将 classStyle 添加到 style 中，这样我们就得到了一个包含样式的样式对象。需要注意的是，我们一定要把样式对象添加到文档中，否则它不会生效。

总结

使用 JavaScript 操作样式可以让我们更加灵活地修改网页样式。我们可以直接操作样式属性，或者使用样式对象创建我们需要的样式，并把它添加到文档中。通过这些方法，我们可以轻松地实现各种样式效果。