CSSStyleRule: style 屬性

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

只讀的 style 屬性是一個 CSSStyleProperties 物件,它代表樣式規則(CSSStyleRule)的內聯樣式。

請注意,該物件上存在瀏覽器支援的所有 CSS 屬性。在相應的 CSS 宣告中未以內聯方式定義的屬性被設定為空字串 ("")。

一個 CSSStyleProperties 物件。

注意: 早期版本的規範返回的是 CSSStyleDeclaration,它現在是 CSSStyleProperties 的基類。有關瀏覽器支援資訊,請參閱 瀏覽器相容性 表。

示例

獲取樣式規則的樣式

下面的 CSS 定義了 h1 選擇器的樣式規則,該規則在程式碼中由一個 CSSStyleRule 例項表示。宣告塊是樣式規則中出現在大括號內的部分,它實際提供了樣式定義(對於選擇器,即出現在大括號前的部分),在程式碼中由 style 屬性表示。

css
h1 {
  color: pink;
}

假設上述樣式規則是文件中的第一條規則,它將是 document.styleSheets[0].cssRules 返回的第一個 CSSRulemyRules[0].style 返回一個 CSSStyleProperties 物件,表示為 h1 定義的宣告。

js
const myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].style); // a CSSStyleProperties representing the declarations on the h1.

規範

規範
CSS 物件模型 (CSSOM)
# dom-cssstylerule-style

瀏覽器相容性