JS函数动态添加CSS样式表

最新推荐文章于 2023-05-29 14:11:46 发布

sallin

最新推荐文章于 2023-05-29 14:11:46 发布

阅读量947

点赞数

分类专栏： html javascript css 文章标签： css stylesheet iframe javascript ie 文本编辑

html 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

转载自：http://www.23sc.cn/Web/Html/9345.html

有时我们需要在.js文件对文档动态引入一些CSS样式。对于一些短小的CSS代码来说，这好办，我们可以调用其style方法。

先给出函数：

var addSheet = function(){ 
  var doc,cssCode; 
  if(arguments.length == 1){ 
    doc = document; 
    cssCode = arguments[0] 
  }else if(arguments.length == 2){ 
    doc = arguments[0]; 
    cssCode = arguments[1]; 
  }else{ 
    alert("addSheet函数最多接受两个参数!"); 
  } 
  if(!+"\v1"){//增加自动转换透明度功能，用户只需输入W3C的透明样式，它会自动转换成IE的透明滤镜 
    var t = cssCode.match(/opacity:(\d?\.\d+);/); 
    if(t!= null){ 
      cssCode = cssCode.replace(t[0], "filter:alpha(opacity="+ parseFloat(t[1]) * 100+")") 
    } 
  } 
  cssCode = cssCode + "\n";//增加末尾的换行符，方便在firebug下的查看
  var headElement = doc.getElementsByTagName("head")[0]; 
  var styleElements = headElement.getElementsByTagName("style"); 
  if(styleElements.length == 0){//如果不存在style元素则创建 
    if(doc.createStyleSheet){//ie 
      doc.createStyleSheet(); 
    }else{ 
      var tempStyleElement = doc.createElement('style');//w3c 
      tempStyleElement.setAttribute("type", "text/css"); 
      headElement.appendChild(tempStyleElement); 
    } 
  } 
  var  styleElement = styleElements[0]; 
  var media = styleElement.getAttribute("media"); 
  if(media != null && !/screen/.test(media.toLowerCase()) ){ 
    styleElement.setAttribute("media","screen"); 
  } 
  if(styleElement.styleSheet){//ie 
    styleElement.styleSheet.cssText += cssCode; 
  }else if(doc.getBoxObjectFor){ 
    styleElement.innerHTML += cssCode;//火狐支持直接innerHTML添加样式表字串 
  }else{ 
    styleElement.appendChild(doc.createTextNode(cssCode)) 
  } 
}

有时我们需要在.js文件对文档动态引入一些CSS样式。对于一些短小的CSS代码来说，这好办，我们可以调用其style方法，如：

1.var ddd = document.getElementById("ddd"); 
2.ddd.style.border = "1px solid red";

如果再长一点也无所谓：

1.var ddd = document.getElementById("ddd"); 
2.ddd.style.cssText = "border:1px solid red;color:#000;background:#444;float:left";

本人而言，我是喜欢后者。因为前者有严重的兼容问题。如float这个样式，在IE是styleFloat，在火狐等W3C标准游览器是cssFloat，而cssText则是通吃。

如果很长，我们可以动态导入一CSS文件。如：

01.function addSheetFile(path){ 
02.    var fileref=document.createElement("link") 
03.    fileref.rel = "stylesheet"; 
04.    fileref.type = "text/css"; 
05.    fileref.href = path; 
06.    fileref.media="screen"; 
07.    var headobj = document.getElementsByTagName('head')[0]; 
08.    headobj.appendChild(fileref); 
09.}

这个函数在IE中有点累赘。我向来是支持哪个游览器就用哪个游览器的原生函数，直接使用二进制代码效率最高：

1.var oStylesheet = document.createStyleSheet ( sURL , iIndex );

createStyleSheet带的两个参数都是可选的。

但如果我们的样式是某个页面独有的，而且只有管理员才能使用到，而且那部分页面是动态生成的，我们需要一开始就引入它吗？需要特意弄个文件来装载它吗？最好的方法让这些样式与动态脚本捆绑在一起。我这个函数就为此而开发的。

坦白说，它最开始是为富文本编辑器而开发的。大家都知道，富文本输入框最流行的做法是把要输入的内容放到iframe中，这就涉及到两种document，一个主页面的document，另一个是iframe的document。 iframe的document又涉及到兼容问题。我们可以：

1.    var iframe = document.createElement('iframe');//生成用于编辑的rich text editor 
2.    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

嘛，扯远了。总而言之，函数最开始的判定就是为这两种document而准备。如果没有涉及到iframe，我们只传入一个参数就行了。最后一个参数永远是CSS字符串。

然后是动态生成styleSheet元素，把CSS字符串加入到此元素的问题。当然如果有现阶段的，当然就用现成的。DOM元素越多对游览器的负担就越大。我们想到document.styleSheets方法。它返回一个集合，包含style元素与link元素，还涉及一兼容问题，如：

01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
02."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
03.<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
04.  <head> 
05.    <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> 
06.    <%# 强制IE8像IE7一样呈现网页 -%> 
07.    <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ /> 
08.    <%#--默认所有的链接都在本窗口打开 -%> 
09.    <base target="_self" /> 
10.    <title><%= h(yield(:title)) || controller.action_name%></title> 
11.    <%= stylesheet_link_tag "screen","button","style"%> 
12.    <link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print"> 
13.    <!--[if lt IE 8]> 
14.     <link rel="stylesheet" href="/stylesheets/ie.css" type="text/css" media="screen"> 
15.    <![endif]--> 
16.    <%= javascript_tag "window._token = '#{form_authenticity_token}'" if ActionController::Base.allow_forgery_protection%> 
17.    <%= javascript_include_tag :defaults%> 
18.     <style type="text/css" media="print"></style> 
19.  </head>

sallin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS函数动态添加CSS样式表

转载自：http://www.23sc.cn/Web/Html/9345.html有时我们需要在.js文件对文档动态引入一些CSS样式。对于一些短小的CSS代码来说，这好办，我们可以调用其style方法。先给出函数：var addSheet = function(){ var doc,cssCode; if(arguments.length == 1){
复制链接

扫一扫