使用動態樣式資訊
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 將會刪除該值。