2009年1月23日

styleSheets:特徵

特徵 | 方法
styleSheets 的特徵

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 則三者皆有之。使用時最好多測試。
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>

  • 執行結果:

    https://www.blogger.com/static/v1/widgets/55013136-widget_css_bundle.css

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>

  • 執行結果:

    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 都支援。
ownerNode

存放此份風格表所屬的元素結。

  • 程式用法:

    <script type='text/javascript'>
    document.write( document.styleSheets[0].ownerNode.tagName );
    </script>

  • 執行結果:

    LINK

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

如果風格表使用 @import 讀入,則此物件存放 @import 的規則。

  • 程式用法:

    <script type='text/javascript'>
    document.write( document.styleSheets[0].ownerRule );
    </script>

  • 執行結果:

    null

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

使用此風格表的父風格表。

  • 程式用法:

    <script type='text/javascript'>
    document.write( document.styleSheets[0].parentStyleSheet );
    </script>

  • 執行結果:

    null

title

存放 STYLE 標籤上的 TITLE 屬性內容。

  • 程式用法:

    <script type='text/javascript'>
    document.write( document.styleSheets[0].title );
    </script>

  • 執行結果:

    null

type

指定風格表的語言。

  • 程式用法:

    <script type='text/javascript'>
    document.write( document.styleSheets[0].type );
    </script>

  • 執行結果:

    text/css


©2008-2009 by ant2legs, All Rights Reserved. ant2legs 擁有其製作的文章,圖片與程式的著作權,所有權利保留。