Javascript 动态加载 CSS STYLE 元素

用 Javascript 动态加载一个 CSS 文件的方法很简单，但是如果想要加载一个 CSS STYLE 元素，里面写入一些 CSS 语句就没有那么简单了。不过也难不倒我们，查一查 MSDN 和 Mozilla 的开发网站就可以写出来了，下面的语句兼容了 IE,Firefox,Safari，Opera 没有测试。

function AttachStyle(ownDoc,styCss) { 
    var elmSty = ownDoc.createElement('STYLE'); 
    elmSty.setAttribute("type", "text/css"); 
    if (elmSty.styleSheet) { 
        elmSty.styleSheet.cssText=styCss;  
    } else {  
        elmSty.appendChild(ownDoc.createTextNode(styCss));  
    } 
    ownDoc.getElementsByTagName("head")[0].appendChild(elmSty); 
}

本日志由 Loveyuki 于 2008-01-31 15:21 发表，目前已经被浏览 6514 次，评论 11 次；

作者添加了以下标签： Javascript，动态加载，Firefox，Internet Explorer，Safari；

引用通告：http://www.loveyuki.com/Article/45/Trackback.ashx

评论订阅：http://www.loveyuki.com/Article/45/Feeds.ashx

微软要强制升级 Internet Explorer 了2008-01-22 18:15
推荐大家都升级到 Internet Explorer 72007-11-16 19:15
Windows 7 真能拯救 Vista 嘛？2009-04-26 08:34
Apple Safari 3.1 For Windows Final 发布了2008-03-18 23:26
Firefox 里面选取子节点的问题。2007-12-04 10:54

评论列表

RainBlog

2008-01-31 22:43 | # | 回复

这种写法不科学,你认为OO么?而且很不灵活,不适合Ajax异步转载!轻微鄙视一下!
最好使用CSS外部导入法加载!functionAttachStyle(){
RainBlog

2008-01-31 22:44 | # | 回复

function AttachStyle(){
this.load=function(URL) {
var css=document.createElement('link');
css.type="text/css";
css.rel="="stylesheet";
css.src=URL;
var head=document.getElementsByTagName("head")[0];
head.appendChild(css);
var self=this;
css.onload=css.onreadystatechange=function(){
if(this.readyState&&this.readyState=="loading") return;
self.onsuccess();
}
css.onerror=function(){
head.removeChild();
self.onfailure();
}
}
this.onsuccess=function(){}//加载成功事件
this.onfailure=function(){}//加载失败事件
}
RainBlog

2008-01-31 22:46 | # | 回复

以上方法适合任何外部导入script link等等
RainBlog

2008-01-31 22:52 | # | 回复

css.rel="stylesheet"; //貌似 30分钟内修改评论不能用?
Loveyuki

2008-01-31 23:09 | # | 回复

暂时不能用的。呵呵。解释型的语言不要太 OO。银蛋是不存在的。
RainBlog

2008-02-01 14:15 | # | 回复

解释型的语言不要太 OO??ajax里面javascript不仅仅再是添加表单验证或网页特效的脚本语言了,它已经被工程化了!
slleo

2008-02-01 15:30 | # | 回复

loveyuki重新开张了，贺一下。
先报告一个小BUG：http://www.loveyuki.comArticle/45/Feeds.ashx路径中少了一个/，所有的页面里的“引用通告”和“评论订阅”基本上都少这个，路径错了。
汤尼尔

2008-02-01 19:53 | # | 回复

css.src = ""; 最好用
另：预祝老哥春节快乐。
Crazy

2008-02-03 16:50 | # | 回复

应该考虑用现成的js框架了，现在有那么多好的框架
wllllll

2008-06-10 14:25 | # | 回复

一楼，这个东西怎么不适合ajax了呢，先下载数据，再用这个书写。
怎么会不适合ajax呢。真奇怪了。

用js下载css，再用此函数书写css，不一样是ajax
test

2009-06-09 12:52 | # | 回复

link方式要求加载的xx.css已经存在我现在就需要一个加载到当页<style>里面的方式，试了多次，没能找到对应的方法。多谢了。不同的方式对应不同需求至于不要太OO，我也不明白，但很不喜欢自以为是的搞这些名词。