使用动态样式信息

CSS 对象模型 (CSSOM) 是 DOM 的一部分，它公开了特定的接口，允许操作有关 CSS 的大量信息。这些接口最初在 *DOM Level 2 Style* 建议中定义，现在形成了一个规范，*CSS 对象模型 (CSSOM)*，旨在取代它。

在许多情况下，并且在可能的情况下，最佳实践是通过 className 属性动态操作类，因为所有样式挂钩的最终外观都可以在单个样式表中控制。JavaScript 代码也变得更简洁，因为它不再专注于样式细节，而是可以专注于它创建或操作的每个部分的整体语义，并将精确的样式细节留给样式表。但是，在某些情况下，实际获取或操作规则可能很有用（无论是针对整个样式表还是单个元素），这将在下面进一步详细描述。还要注意，与单个元素的 DOM 样式一样，在谈论操作样式表时，这实际上并不是在操作物理文档，而仅仅是在操作文档的内部表示。

基本 style 对象公开了 Stylesheet 和 CSSStylesheet 接口。这些接口包含诸如 insertRule、selectorText 和 parentStyleSheet 之类的成员，用于访问和操作构成 CSS 样式表的各个样式规则。

要从 document 获取 style 对象，可以使用 Document.styleSheets 属性，并通过索引访问各个对象（例如，document.styleSheets[0] 是为文档定义的第一个样式表，依此类推）。

使用 CSSOM 修改样式表规则

在此示例中，页面背景使用 CSS 设置为红色。然后，JavaScript 使用 CSSOM 访问该属性并将背景更改为蓝色。

html

<html lang="en">
  <head>
    <title>Modifying a stylesheet rule with CSSOM</title>
    <style>
      body {
        background-color: red;
      }
    </style>
    <script>
      const stylesheet = document.styleSheets[0];
      stylesheet.cssRules[0].style.backgroundColor = "aqua";
    </script>
  </head>
  <body>
    The stylesheet declaration for the body's background color is modified via
    JavaScript.
  </body>
</html>

结果

style 属性中 DOM 可用的属性列表在 DOM CSS 属性列表页面上给出。

要使用 CSS 语法修改文档的样式，可以插入规则或插入 <style> 标记，其 innerHTML 属性设置为所需的 CSS。

修改元素的样式

元素 style 属性（另请参见下面的“DOM 样式对象”部分）也可用于获取和设置元素的样式。但是，此属性仅返回已内联设置的样式属性（例如，<td style="background-color: lightblue"> 返回字符串“background-color:lightblue”，或直接使用 element.style.propertyName 获取该元素，即使样式表中可能存在该元素的其他样式）。

此外，当您在元素上设置此属性时，您将覆盖为该元素的特定属性在其他地方设置的任何样式。例如，设置 border 属性将覆盖在头部部分或外部样式表中为该元素的 border 属性在其他地方做出的设置。但是，这不会影响该元素样式的任何其他属性声明，例如填充或边距或字体。

要更改特定元素的样式，您可以针对要设置样式的元素调整以下示例。

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style example</title>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    </script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    </style>
  </head>

  <body>
    <!-- passes a reference to the element's object as parameter 'this'. -->
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    </p>

    <!-- passes the 'p1' id of another element's style to modify. -->
    <button onclick="resetStyle('p1');">Reset background color</button>
  </body>
</html>

document.defaultView 对象上的 getComputedStyle() 方法返回实际上已为元素计算的所有样式。

DOM 样式对象

style 对象表示单个样式语句。样式对象可从 document 或应用该样式的元素访问。它表示特定元素上的内联样式。

设置样式属性

这里提到的两个属性中，更重要的是使用 style 对象在元素上设置单个样式属性。

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Example</title>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    </script>
  </head>

  <body>
    <div id="d" class="thunder">Thunder</div>
    <button onclick="setStyle()">Click here to change text color</button>
    <button onclick="resetStyle()">Reset text color</button>
  </body>
</html>

样式的媒体和类型可能会也可能不会给出。

使用 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 会删除该值。