JavaScript新增樣式規(guī)則(推薦)

字號(hào):


    這篇文章主要介紹了JavaScript新增樣式規(guī)則(推薦)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    關(guān)鍵代碼如下所示:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="basic.css">
     <script>
     window.onload=function(){
          var sheet=document.styleSheets[0];
          //【新增樣式規(guī)則】
         // sheet.insertRule('.div1{font-size:16px;color:red;}',0);     IE8及以上不支持  //第一個(gè)參數(shù)是樣式,第二個(gè)是樣式的位置
         // sheet.addRule('.div1','font-size:20px;color:orange;font-weight:bold;',0);    //IE都支持    //第一個(gè)參數(shù)是樣式名,第二個(gè)樣式位置是樣式規(guī)則,第三個(gè)是樣式位置
          function insertCss(element,csName,position){                        //跨瀏覽器兼容      
            if(sheet.insertRule){                     // sheet.insertRule 非IE的時(shí)候會(huì)讀取到一個(gè)函數(shù),IE8即以上的時(shí)候會(huì)讀取到undefined
           sheet.insertRule(element+'{'+csName+'}',position);    
         }else if(sheet.addRule){                      
           sheet.addRule(element,csName,position);
         }
     }
       insertCss('.div1','font-size:16px;color:orange',0);
        //【刪除樣式規(guī)則】
       //sheet.deleteRule(position) ; //刪除樣式 參數(shù)為位置        //IE8及以上不支持
       //sheet.removeRule(position) ; //刪除樣式 參數(shù)為位置        //IE支持
       function deleteCss(position){        //跨瀏覽器兼容
       if(sheet.deleteRule){        
          sheet.deleteRule(position);
     }else if(sheet.removeRule){
         sheet.removeRule(position);
     }  
     deleteCss(0);
     }
    }
     </script>
    </head>
    <body></body>
    </html>
    以上所述是小編給大家介紹的JavaScript新增樣式規(guī)則(推薦),希望對(duì)大家有所幫助