SYNCERのロゴ
アイキャッチ画像

CSSStyleSheet - スタイルシート

CSSStyleSheetは、CSSスタイルシートを管理するための機能を備えたインターフェイスです。

概要

名前
CSSStyleSheet
継承
IDL
[Exposed=Window]
interface CSSStyleSheet : StyleSheet {
  readonly attribute CSSRule? ownerRule;
  [SameObject] readonly attribute CSSRuleList cssRules;
  unsigned long insertRule(CSSOMString rule, optional unsigned long index = 0);
  void deleteRule(unsigned long index);
};

typedef USVString CSSOMString;
仕様書
https://drafts.csswg.org/cssom/#cssstylesheet

チュートリアル

CSSStyleSheetのインターフェイスは、StyleSheetListの個々のインデックスに含まれています。

var styleSheetList = document.styleSheets ;	// CSSStyleSheet
styleSheetList[0] ;	// CSSStyleSheet

スタイルシートとは、style要素やlink要素を単位としたものです。例えば、下記は3つのスタイルシートです。個々のスタイルシートがCSSStyleSheetで表現されています。

<link rel="stylesheet" href="./style.css">

<style id="hoge">
a { color: red ; }
area { color: blue ; }
</style>

<style id="fuga">
b { color: red ; }
blockquote { color: blue ; }
</style>
var styleSheetList = document.styleSheets ;	// CSSStyleSheet

styleSheetList[0] ;	// <link rel="stylesheet" href="./style.css"> (CSSStyleSheet)
styleSheetList[1] ;	// <style id="hoge">...</style> (CSSStyleSheet)
styleSheetList[2] ;	// <style id="fuga">...</style> (CSSStyleSheet)

コンストラクタ

コンストラクタはありません。

プロパティ

cssRules

スタイルシートが含む全てのCSSルールをCSSRuleListで返します。

ownerRule

自身のオーナーであるCSSルールを返します。

メソッド

deleteRule()

スタイルシートのCSSルールを1つ削除します。

insertRule()

スタイルシートに1つのCSSルールを追加します。

定数

固有の定数はありません。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
CSSStyleSheet 9+
cssRules 9+
deleteRule() 9+
insertRule() 9+
ownerRule 9+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月14日 (土)
コンテンツを公開しました。