stylesheetオブジェクト
■stylesheetオブジェクトとは
・ドキュメント内のスタイルシートを表し、ドキュメントが読み込んでいる外部CSSファイルや<style>タグで指定したCSS毎に存在する。
■document.styleSheets
・ドキュメントで使われているstyleSheetオブジェクトはdocument.styleSheetsに配列形式で格納される。
・外部CSSファイル単位、ページ内の<style type="text/css">〜</style>単位で取得
・document.styleSheets.length ･･･stylesheetオブジェクトの数を返す
・個別のstylesheetオブジェクトを参照するには
方法1)配列のindex番号で（出現順に0から始まるindex番号が付けられる）
(例)document.styleSheets[1]; // 2番目のスタイルシートオブジェクト
(例)document.styleSheets[0].href; //外部CSSファイルのURLが得られる。
方法2)item()メソッドを利用
document.styleSheets.item(index番号)
方法3)id名で参照（IE、Chrome対応、FireFoxは不可）
(例)document.styleSheets["style1"]
Sample
このページのstylesheetオブジェクトを
stylesheetオブジェクトをid属性で
Sample Source......................................................................>>>
<link rel="stylesheet" href="../css_css.css" type="text/css">
<style id="sty1" type="text/css">
h5 {background-color:lavender;color:red;}
</style>
<style type="text/css">
div.sample p.sample {font-style:italic;color:navy}
</style>
<script type="text/javascript"><!--
function StyleSheet(){
var s_sheets = document.styleSheets;
alert("このページに使われているstylesheetオブジェクトの総数は：" + s_sheets.length +
"個\n外部CSSファイルのurlは："
+ s_sheets[0].href);
}
function StyleSheet2(){
document.styleSheets["sty1"].disabled =
(document.styleSheets["sty1"].disabled
== true) ? false : true;
}
// --></script>
</head>
<body>
<h5>Sample</h5>
<p class="sample">
このページのstylesheetオブジェクトを<button onclick="StyleSheet()">取得する</button>
</p>
<p class="sample">stylesheetオブジェクトをid属性で
<button onclick="StyleSheet2()">参照する</button></p>