StyleSheet - スタイルシート
StyleSheetは、スタイルシートを管理するための機能を備えたインターフェイスです。
概要
- 名前
- StyleSheet
- IDL
[Exposed=Window] interface StyleSheet { readonly attribute CSSOMString type; readonly attribute USVString? href; readonly attribute (Element or ProcessingInstruction)? ownerNode; readonly attribute StyleSheet? parentStyleSheet; readonly attribute DOMString? title; [SameObject, PutForwards=mediaText] readonly attribute MediaList media; attribute boolean disabled; }; typedef USVString CSSOMString;
- 仕様書
- https://drafts.csswg.org/cssom/#stylesheet
チュートリアル
StyleSheetのインターフェイスは、CSSStyleSheetが継承しています。StyleSheetListの個々のインデックスがCSSStyleSheetです。
var styleSheetList = document.styleSheets ; // StyleSheet
styleSheetList[0] ; // CSSStyleSheet (StyleSheetを継承)
スタイルシートとは、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 ; // StyleSheet
styleSheetList[0] ; // <link rel="stylesheet" href="./style.css"> (CSSStyleSheet)
styleSheetList[1] ; // <style id="hoge">...</style> (CSSStyleSheet)
styleSheetList[2] ; // <style id="fuga">...</style> (CSSStyleSheet)
コンストラクタ
コンストラクタはありません。
プロパティ
disabled
このプロパティにtrueを代入すると、そのスタイルシートが無効になります。
href
外部ファイルのスタイルシートのアドレスを返します。
media
スタイルシートが適用されるメディアをMediaListで返します。
ownerNode
スタイルシートの主たるノードを返します。
parentStyleSheet
親のスタイルシートを返します。
title
スタイルシートのタイトルを返します。
type
スタイルシートのmime typeである"text/css"を返します。
メソッド
固有のメソッドはありません。
定数
固有の定数はありません。
イベント
固有のイベントハンドラはありません。
サポート状況
クリックすると、バージョンごとの対応状況を確認できます。
Features | Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|---|
StyleSheet | ● | ● | ● | ● | ● | ● | ● | ● |
disabled | ● | ● | ● | ● | ● | ● | ● | ● |
href | ● | ● | ● | ● | ● | ● | ● | ● |
media | ● | ● | ● | ● | ● | ● | ● | ● |
ownerNode | ● | ● | ● | ● | ● | ● | ● | ● |
parentStyleSheet | ● | ● | ● | ● | ● | ● | ● | ● |
title | ● | ● | ● | ● | ● | ● | ● | ● |
type | ● | ● | ● | ● | ● | ● | ● | ● |
関連記事
- CSSStyleDeclaration
- CSSStyleDeclarationは、あるスタイルシートのまとまりを管理するための機能を備えたインターフェイスです。
- StyleSheetList
- StyleSheetListは、スタイルシートの集合を管理するための機能を備えたインターフェイスです。
- Document.getElementsByClassName()
- getElementsByClassName()は、Documentのメソッドです。class属性を指定して要素を取得します。
- class属性値を取得、変更する
- 要素のclass属性値を取得、変更、確認する方法をまとめています。