這篇文章主要介紹了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中文網其他相關文章!