使用动态样式信息
CSS 对象模型 (CSSOM) 是 DOM 的一部分，它提供了特定的接口，允许操作大量关于 CSS 的信息。这些接口最初定义在 DOM Level 2 Style 推荐中，现在形成了一个名为 CSS Object Model (CSSOM) 的规范，旨在取代它。
在许多情况下，并且只要可行，最好通过 className 属性动态操作类，因为所有样式挂钩的最终外观都可以在单个样式表中控制。这样，JavaScript 代码也会更简洁，因为它不必专注于样式细节，而是可以关注它正在创建或操作的每个部分的整体语义，将精确的样式细节留给样式表。但是，在某些情况下，获取或操作样式规则本身也很有用（无论是针对整个样式表还是单个元素），这将在下面进一步详细介绍。另请注意，与单个元素的 DOM 样式一样，当我们谈论操作样式表时，实际上并不是在操作物理文档，而仅仅是文档的内部表示。
基本的 style 对象公开了 Stylesheet 和 CSSStylesheet 接口。这些接口包含 insertRule、selectorText 和 parentStyleSheet 等成员，用于访问和操作构成 CSS 样式表的各个样式规则。
要从 document 获取 style 对象，您可以使用 Document.styleSheets 属性，并通过索引访问各个对象（例如，document.styleSheets[0] 是文档定义的第一个样式表，依此类推）。您也可以访问特定 <style> 元素的 sheet 属性来获取其关联的样式表对象。
使用 CSSOM 修改样式表规则
在此示例中，页面的背景使用 CSS 设置为 red。然后，JavaScript 通过 CSSOM 访问该属性，并将背景更改为 cornflowerblue。
<p>The stylesheet declaration for the body is modified via JavaScript.</p>
body {
background-color: red;
font: 1.2em / 1.5 sans-serif;
color: white;
padding: 1em;
}
const stylesheet = document.getElementById("css-output").sheet;
stylesheet.cssRules[0].style.backgroundColor = "cornflowerblue";
DOM 中 style 属性可用的属性列表在 DOM CSS 属性列表页面上提供。
要使用 CSS 语法修改文档的样式，可以通过插入规则或插入 innerHTML 属性设置为所需 CSS 的 <style> 标签来实现。
修改元素的样式
元素 style 属性（另请参阅下面的“DOM 样式对象”部分）也可用于获取和设置元素的样式。但是，此属性仅返回内联设置的样式属性（例如，访问定义为 <td style="background-color: lightblue"> 的元素的 element.style.color 会返回字符串 ""，即使该元素可能通过样式表声明了 color）。
此外，当您在元素上设置此属性时，它会覆盖该元素上您正在设置的特定属性的任何其他位置的样式。例如，设置 border 属性将覆盖在 head 部分或外部样式表中为该元素的 border 属性所做的设置。但是，这不会影响该元素样式的任何其他属性声明，例如 padding、margin 或 font。
要更改特定元素的样式，您可以调整以下示例以适应您想要设置样式的元素。
<p id="p1">Click here to change background color.</p>
<button>Reset background color</button>
#p1 {
border: solid blue 2px;
}
const p1 = document.getElementById("p1");
const button = document.querySelector("button");
p1.addEventListener("click", () => {
p1.style.background = "green";
});
button.addEventListener("click", () => {
p1.style.background = "white";
});
document.defaultView 对象上的 getComputedStyle() 方法返回已为元素计算的所有样式。
使用 setAttribute 方法
请注意，您还可以通过获取对元素的引用，然后使用其 setAttribute 方法来指定 CSS 属性及其值来更改元素的样式。
const el = document.getElementById("some-element");
el.setAttribute("style", "background-color:darkblue;");
但是，请注意，setAttribute 会删除元素 style 对象中可能已定义的所有其他 style 属性。如果上面的 some-element 元素具有内联 style 属性，例如 style="font-size: 18px"，那么使用 setAttribute 将会删除该值。