styleSheets：方法

特徵 | 方法

addRule

deleteRule

insertRule

removeRule

styleSheets 的方法

deleteRule()

刪除風格表的一個規則。Firefox, Safari, Chrome 用此。其語法是：

風格表物件.deleteRule( 指標 )

指標為整數，是要刪除的規則之位置。

removeRule()

刪除風格表的一個規則。IE 用此。其語法同上。

insertRule()

新規則加入風格表。Firefox, Safari, Chrome 用此。其語法是：

風格表物件.insertRule( 規則字串, 指標 )

規則字串必須符合風格表的 規則集合。指標為整數，是新規則放入的位置。

addRule()

新規則加入風格表。IE 用此。其語法是：

風格表物件.addRule( 選擇器， 風格 [, 指標] )

指標可不設，其預設值為 -1，加在尾端。 <style type='text/css'> .newcls {color:green; font-size:80%} </style> <script type='text/javascript'> var ptr=document.styleSheets.length-1; var cr=document.styleSheets[ptr].cssRules; if( cr == undefined ) cr=document.styleSheets[ptr].rules; //IE for( var i=0; i < cr.length ; i++) document.write( cr[i].selectorText +' <b>/</b> '); function delRule(obj, idx) { if( obj.deleteRule ) obj.deleteRule( idx ); else obj.removeRule( idx ); } function newRule(obj, idx, selector, style) { if( obj.insertRule ) obj.insertRule( selector +' {'+ style +'}', idx ); else obj.addRule( selector, style, idx ); } </script> <p><span onclick='newRule( document.styleSheets[ptr], 1, ".newcls", "color:red; font-size:160%")'> 點此新增規則</span> <p><span onclick='delRule( document.styleSheets[ptr], 1)'> 點此刪除規則</span> <p><span class='newcls'>展現新的風格</span>

• 程式用法：

  <style type='text/css'>
  .newcls  {color:green; font-size:80%}
  </style>
  <script type='text/javascript'>
  var ptr=document.styleSheets.length-1;
  var cr=document.styleSheets[ptr].cssRules;
  if( cr == undefined )
    cr=document.styleSheets[ptr].rules; //IE
  for( var i=0; i < cr.length ; i++)
    document.write( cr[i].selectorText +' <b>/</b> ');
  
  function delRule(obj, idx)
  {
    if( obj.deleteRule )
      obj.deleteRule( idx );
    else
      obj.removeRule( idx );
  }
  function newRule(obj, idx, selector, style)
  {
    if( obj.insertRule )
      obj.insertRule( selector +' {'+ style +'}', idx );
    else
      obj.addRule( selector, style, idx );
  }
  </script>
  <p><span onclick='newRule( document.styleSheets[ptr], 1,
      ".newcls",  "color:red; font-size:160%")'>
  點此新增規則</span>
  <p><span onclick='delRule( document.styleSheets[ptr], 1)'>
  點此刪除規則</span>
  <p><span class='newcls'>展現新的風格</span>
  

• 執行結果：

  .newcls /

  點此新增規則

  點此刪除規則

  展現新的風格