首頁  >  文章  >  web前端  >  具體介紹javascript使用兩種方式動態產生css程式碼的詳情

具體介紹javascript使用兩種方式動態產生css程式碼的詳情

黄舟
黄舟原創
2017-03-17 14:50:03982瀏覽

這篇文章主要介紹了javascript 動態產生css程式碼的兩種方法,有時候我們需要利用js來動態產生頁面上style標籤中的css程式碼,下面就給大家介紹兩種方法,需要的朋友可以參考下

javascript 動態產生css程式碼的兩種方法

有時候我們需要利用js來動態產生頁面上style標籤中的css程式碼,方法很直接,就是直接建立style元素,然後設定style元素裡面的css程式碼,最後把它插入到head元素中。但有些相容性問題我們需要解決。首先在符合w3c標準的瀏覽器中我們只需要把要插入的css程式碼作為一個文字節點插入到style元素中即可,而在IE中則需要利用style元素的styleSheet.cssText來解決。還要注意的就是在有些版本IE中一個頁面上style標籤數量是有限制的,如果超過了會報錯,需要考慮這一點。

方法1:

給0c1c5a64e17b6dfe42b59c3563e43ede標籤加上id名,在3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤中寫

var oCss=document.getElementById("css");

oCss.innerHTML+="#box{width:200px;}";

這樣就可以加上樣式了。

方法2:

有時候我們需要利用js來動態產生頁面上style標籤中的css程式碼,方法很直接,就是直接建立一個style元素,然後設定style元素裡面的css程式碼,最後把它插入head元素中。但有些相容性問題我們需要解決。首先在符合w3c標準的瀏覽器中我們只需要把要插入的css程式碼作為一個文字節點插入到style元素中即可,而在IE中則需要利用style元素的styleSheet.cssText來解決。還要注意的就是在有些版本IE中一個頁面上style標籤數量是有限制的,如果超過了會報錯,需要考慮這一點。

下面直接放上程式碼,看註解說明。

function addCSS(cssText){
  var style = document.createElement('style'), //创建一个style元素
    head = document.head || document.getElementsByTagName('head')[0]; //获取head元素
  style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css,否则在ie中不起作用
  if(style.styleSheet){ //IE
    var func = function(){
      try{ //防止IE中stylesheet数量超过限制而发生错误
        style.styleSheet.cssText = cssText;
      }catch(e){

      }
    }
    //如果当前styleSheet还不能用,则放到异步中则行
    if(style.styleSheet.disabled){
      setTimeout(func,10);
    }else{
      func();
    }
  }else{ //w3c
    //w3c浏览器中只要创建文本节点插入到style元素中就行了
    var textNode = document.createTextNode(cssText);
    style.appendChild(textNode);
  }
  head.appendChild(style); //把创建的style元素插入到head中  
}

//使用
addCSS('#demo{ height: 30px; background:#f00;}');

當然這只是一個最基本的演示方法,實際運用中還需進行完善,比如把每次生成的css代碼都插入到一個style元素中,這樣在IE中就不會發生stylesheet數量超出限制的錯誤了。

總結:以上方法可以解決很多問題,有什麼不懂的找我!

以上是具體介紹javascript使用兩種方式動態產生css程式碼的詳情的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn