CSS 宣告塊

CSS 宣告塊是 CSS 屬性和值的有序集合。在 DOM 中,它表示為一個 CSSStyleDeclaration 物件。

每個屬性值對被稱為一個 CSS 宣告。CSS 宣告塊具有以下關聯屬性:

computed flag (計算標誌)

如果 CSSStyleDeclaration 物件是計算樣式而非指定樣式,則設定為 true。預設情況下未設定。

declarations (宣告)

與此物件關聯的 CSS 宣告

parent CSS rule (父 CSS 規則)

CSS 宣告塊所屬的 CSSRule,否則為 null。

owner node (所有者節點)

CSS 宣告塊關聯的 element,否則為 null。

updating flag (更新標誌)

當 CSS 宣告塊正在更新所有者節點的 style 屬性時設定為 true。

CSS 物件模型 (CSSOM) 介面返回 CSSStyleDeclaration 物件時,這些屬性將根據規範進行設定。

基本示例

以下示例顯示了一個 CSS 規則,其中包含一個用於 h1 元素的宣告塊。CSS 宣告塊是花括號之間的行。

css
h1 {
  margin: 0 auto;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-style: italic;
  color: rebeccapurple;
}

我們可以使用 CSSStyleRule.style 返回一個表示此 CSS 宣告塊的 CSSStyleDeclaration 物件。

js
let myRules = document.styleSheets[0].cssRules;
let rule = myRules[0]; // a CSSStyleRule
console.log(rule.style); // a CSSStyleDeclaration object

規範

規範
CSS 物件模型 (CSSOM)
# css-declaration-blocks