Loveyuki's BLOG

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

  1. function AttachStyle(ownDoc,styCss) { 
  2.     var elmSty = ownDoc.createElement('STYLE'); 
  3.     elmSty.setAttribute("type""text/css"); 
  4.     if (elmSty.styleSheet) { 
  5.         elmSty.styleSheet.cssText=styCss;  
  6.     } else {  
  7.         elmSty.appendChild(ownDoc.createTextNode(styCss));  
  8.     } 
  9.     ownDoc.getElementsByTagName("head")[0].appendChild(elmSty); 

本日志由 Loveyuki 于 2008-01-31 15:21 发表,目前已经被浏览 1665 次,评论 10 次;

作者添加了以下标签: Javascript动态加载FirefoxInternet ExplorerSafari

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

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

文章评论

引用RainBlog 发表于 2008-01-31 22:43 #

这种写法不科学,你认为OO么?而且很不灵活,不适合Ajax异步转载!轻微鄙视一下!

最好使用CSS外部导入法加载!

  1. function AttachStyle(){
引用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 #

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

暂时不能用的。呵呵。解释型的语言不要太 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

(必填)
(必填,不会被公开)
你可以在 30 分钟内修改你所发表的评论

日历

  • 29
  • 30
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 1
  • 2

搜索

站点统计

版权所有©2007-2008, Loveyuki.com | 系统:Bitrac | 皮肤:HelloWiki | 图标:XiaoIcon | 空间域名:光辉互联,易联网络