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 |