Javascript

动态加载样式元素的函数(兼容IE,FireFox,Opera)

作者: 青锋幽灵  日期: 2008-09-07 11:34

字体大小: 小 中 大

如题，目前只对IE，FireFox，Opera这三种浏览器的兼容性进行过测试，其它浏览器还未测试。

有兴趣的朋友可以研究一下，应该也没问题的。

JavaScript代码
  1. function AttachStyle(styDom, styCss, styId){   
  2.     var istyle = styDom.createElement('style');   
  3.     istyle.setAttribute("type", "text/css");   
  4.     if(styId!=null){if(!document.getElementById(styId)){istyle.setAttribute("id", styId);}}   
  5.     if (istyle.styleSheet){   
  6.         istyle.styleSheet.cssText=styCss;   
  7.     }else{   
  8.         istyle.appendChild(styDom.createTextNode(styCss));   
  9.     }   
  10.     styDom.getElementsByTagName("head")[0].appendChild(istyle);   
  11. }  

应用代码：

JavaScript代码
  1. if(!document.getElementById('attach-css-1')){      
  2.     var iCss='';      
  3.     iCss+='.test-style1 {font-size:18px;color:#f60;}';      
  4.     iCss+='.test-style2 {font-size:16px;color:#f60;}';      
  5.     iCss+='.test-style3 {font-size:14px;color:#f60;}';      
  6.     iCss+='.test-style4 {font-size:12px;color:#f60;}';      
  7.     AttachStyle(document,iCss,'attach-css-1');      
  8. }      
  9.      
  10. /**    
  11. 大家可以测试一下 test-style1,test-style2,test-style3 这三个样式变化了吗？    
  12. **/  
引用通告地址: 点击获取引用地址
标签: 动态加载 样式 javascript
评论: 0 | 引用: 0 | 阅读: 2099 | 打印 | 打包