CSSStyleRule

Baseline 廣泛可用 *

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

* 此特性的某些部分可能存在不同級別的支援。

CSSStyleRule 介面代表一個單一的 CSS 樣式規則。

CSSRule CSSGroupingRule CSSStyleRule

例項屬性

繼承其祖先 CSSGroupingRuleCSSRule 的屬性。

CSSStyleRule.selectorText

返回此規則的 CSS 選擇器的文字表示形式,例如 "h1, h2"

CSSStyleRule.style 只讀

返回規則的 CSSStyleProperties 物件,該物件表示其樣式。

CSSStyleRule.styleMap 只讀

返回一個 StylePropertyMap 物件,該物件提供對規則的屬性-值對的訪問。

例項方法

繼承其祖先 CSSGroupingRuleCSSRule 的方法。

示例

獲取樣式規則

下面的 CSS 定義了 h1 選擇器的樣式規則,在程式碼中由 CSSStyleRule 例項表示。

css
h1 {
  color: pink;
}

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

js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0]); // a CSSStyleRule representing the h1.

規範

規範
CSS 物件模型 (CSSOM)
# the-cssstylerule-interface

瀏覽器相容性