styleSheets：特徵

特徵 | 方法

styleSheets 的特徵

document.styleSheets 存放當下文件風格表的清單。此物件在不同瀏覽器的定義有很多差異，使用時要多測試。 <script type='text/javascript'> document.write( document.styleSheets.length +'<br />'+ document.styleSheets[0].type); </script>

• 在 Safari, Chrome 必須先用 LINK 讀入的風格表才會建立此物件。先用 @import 讀入的風格表，或植入的風格表區塊，則無此物件。IE, Firefox 則三者皆有之。使用時最好多測試。

cssRules

rules

存放風格表中所有的規則。Firefox, Safari, Chrome 用 cssRules；IE 用 rules。此陣列存放 cssRule 物件，此物件有兩個特徵：

1. selectorText：讀取或設定選擇器。
2. style：風格區塊物件。

<ol> <script type='text/javascript'> var cr=document.styleSheets[5].cssRules; if( cr == undefined ) cr=document.styleSheets[5].rules; //IE for( var i=0; i < cr.length ; i++) document.write( '<li><b>'+ cr[i].selectorText +'</b>：'+ cr[i].style.cssText ); </script> </ol>

• 上面列出的是這個部落格用到的風格表。

disabled

讀取或設定風格表使用狀態：false 為使用中；true 為不使用。 <script type='text/javascript'> document.write( document.styleSheets[5].disabled ); </script> <p><span onclick='document.styleSheets[5].disabled=true'> 點此關閉風格表</span> <p><span onclick='document.styleSheets[5].disabled=false'> 點此啟用風格表</span>

href

存放風格表檔案的網址。 <script type='text/javascript'> document.write( document.styleSheets[0].href ); </script>

media

MediaList 物件，指定風格表施用的 媒體。 <script type='text/javascript'> var md=document.styleSheets[0].media; document.write( md +'<p>'); for( k in md ) document.write( k +' : '+ md[k] +'<br />'); </script>

• IE6 無此項；Firefox, Safari, Chrome 都支援。

ownerNode

存放此份風格表所屬的元素結。 <script type='text/javascript'> document.write( document.styleSheets[0].ownerNode.tagName ); </script>

• IE6 無此項；Firefox, Safari, Chrome 都支援。

ownerRule

如果風格表使用 @import 讀入，則此物件存放 @import 的規則。 <script type='text/javascript'> document.write( document.styleSheets[0].ownerRule ); </script>

• IE6 無此項；其它瀏覽器支援不良。

parentStyleSheet

使用此風格表的父風格表。 <script type='text/javascript'> document.write( document.styleSheets[0].parentStyleSheet ); </script>

title

存放 STYLE 標籤上的 TITLE 屬性內容。 <script type='text/javascript'> document.write( document.styleSheets[0].title ); </script>

type

指定風格表的語言。 <script type='text/javascript'> document.write( document.styleSheets[0].type ); </script>