document.styleSheets 存放當下文件風格表的清單。此物件在不同瀏覽器的定義有很多差異,使用時要多測試。
- 程式用法:
<script type='text/javascript'>
document.write( document.styleSheets.length
+'<br />'+ document.styleSheets[0].type);
</script> - 執行結果:
3
text/css
- 在 Safari, Chrome 必須先用 LINK 讀入的風格表才會建立此物件。先用 @import 讀入的風格表,或植入的風格表區塊,則無此物件。IE, Firefox 則三者皆有之。使用時最好多測試。
存放風格表中所有的規則。Firefox, Safari, Chrome 用 cssRules;IE 用 rules。此陣列存放 cssRule 物件,此物件有兩個特徵:
- selectorText:讀取或設定選擇器。
- 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> - 執行結果:
- 上面列出的是這個部落格用到的風格表。
讀取或設定風格表使用狀態: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> - 執行結果:
點此關閉風格表
點此啟用風格表
存放風格表檔案的網址。
- 程式用法:
<script type='text/javascript'>
document.write( document.styleSheets[0].href );
</script> - 執行結果:
https://www.blogger.com/static/v1/widgets/55013136-widget_css_bundle.css
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> - 執行結果:
length : 0
mediaText :
appendMedium : function appendMedium() { [native code] }
deleteMedium : function deleteMedium() { [native code] }
item : function item() { [native code] }
toString : function toString() { [native code] }
- IE6 無此項;Firefox, Safari, Chrome 都支援。
存放此份風格表所屬的元素結。
- 程式用法:
<script type='text/javascript'>
document.write( document.styleSheets[0].ownerNode.tagName );
</script> - 執行結果:
LINK
- IE6 無此項;Firefox, Safari, Chrome 都支援。
如果風格表使用 @import 讀入,則此物件存放 @import 的規則。
- 程式用法:
<script type='text/javascript'>
document.write( document.styleSheets[0].ownerRule );
</script> - 執行結果:
null
- IE6 無此項;其它瀏覽器支援不良。
使用此風格表的父風格表。
- 程式用法:
<script type='text/javascript'>
document.write( document.styleSheets[0].parentStyleSheet );
</script> - 執行結果:
null
存放 STYLE 標籤上的 TITLE 屬性內容。
- 程式用法:
<script type='text/javascript'>
document.write( document.styleSheets[0].title );
</script> - 執行結果:
null
指定風格表的語言。
- 程式用法:
<script type='text/javascript'>
document.write( document.styleSheets[0].type );
</script> - 執行結果:
text/css