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

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"を返します。

メソッド

固有のメソッドはありません。

定数

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

イベント

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

サポート状況

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

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
StyleSheet
disabled
href
media
ownerNode
parentStyleSheet
title
type
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月14日 (土)
コンテンツを公開しました。