CSSStyleRule

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

CSSStyleRule は、単一の CSS スタイルルールを表します。

インスタンスプロパティ

祖先である CSSRule からプロパティを継承しています。

CSSStyleRule.selectorText: このルールのセレクターのテキスト表現を返します。例: "h1,h2"
CSSStyleRule.style 読取専用: このルールの CSSStyleDeclaration オブジェクトを返します。
CSSStyleRule.styleMap 読取専用: StylePropertyMap オブジェクトを返し、これによってこのルールのプロパティと値の組へアクセスできます。

インスタンスメソッド

固有のメソッドはありません。祖先である CSSRule からメソッドを継承しています。

例

この CSS は 1 つのスタイルルールを含んでいます。これは最初の CSSRule となり、 document.styleSheets[0].cssRules で返されます。従って、 myRules[0] は h1 を定義するルールを表す CSSStyleRule オブジェクトを返します。

css

h1 {
  color: pink;
}

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

仕様書

Specification
CSS Object Model (CSSOM) # the-cssstylerule-interface

ブラウザーの互換性

BCD tables only load in the browser