JS函数实现动态添加CSS样式表⽂件
先给出函数。
复制代码代码如下:
varaddSheet=function(){
vardoc,cssCode;
if(arguments.length==1){
doc=document;
cssCode=arguments[0]
}elseif(arguments.length==2){
doc=arguments[0];
cssCode=arguments[1];
}else{
alert("addSheet函数最多接受两个参数!");
}
if(!+"v1"){//增加⾃动转换透明度功能，⽤户只需输⼊W3C的透明样式，它会⾃动转换成IE的透明滤镜
vart=cssCode.match(/opacity:(d?.d+);/);
if(t!=null){
place(t[0],"filter:alpha(opacity="+parseFloat(t[1])*100+")")
}
}
cssCode=cssCode+" ";//增加末尾的换⾏符，⽅便在firebug下的查看。
ElementsByTagName("head")[0];
ElementsByTagName("style");
if(styleElements.length==0){//如果不存在style元素则创建
ateStyleSheet){//ie
}else{
ateElement('style');//w3c
tempStyleElement.setAttribute("type","text/css");
headElement.appendChild(tempStyleElement);
}
}
varstyleElement=styleElements[0];
Attribute("media");
if(media!=null&&!/screen/.LowerCase())){
styleElement.setAttribute("media","screen");
}
if(styleElement.styleSheet){//ie
styleElement.styleSheet.cssText+=cssCode;
}BoxObjectFor){
styleElement.innerHTML+=cssCode;//⽕狐⽀持直接innerHTML添加样式表字串
}else{
styleElement.ateTextNode(cssCode))
}
}
  有时我们需要在.js⽂件对⽂档动态引⼊⼀些CSS样式。对于⼀些短⼩的CSS代码来说，这好办，我们可以调⽤其style⽅法，如
复制代码代码如下:
ElementById("ddd");
ddd.style.border="1pxsolidred";
  如果再长⼀点也⽆所谓：
复制代码代码如下:
ElementById("ddd");
ddd.style.cssText="border:1pxsolidred;color:#000;background:#444;float:left";
css文件怎么写
  本⼈⽽⾔，我是喜欢后者。因为前者有严重的兼容问题。如float这个样式，在IE是styleFloat，在⽕狐等W3C标准游览器是cssFloat。⽽cssText则是通吃。
  如果很长，我们可以动态导⼊⼀CSS⽂件。如
复制代码代码如下:
functionaddSheetFile(path){
ateElement("link")
fileref.href=path;
ElementsByTagName('head')[0];
headobj.appendChild(fileref);
}
  这个函数在IE中有点累赘。我向来是⽀持哪个游览器就⽤哪个游览器的原⽣函数，直接使⽤⼆进制代码效率最⾼。
复制代码代码如下:
ateStyleSheet(sURL,iIndex);
  createStyleSheet带的两个参数都是可选的。
  但如果我们的样式是某个页⾯独有的，⽽且只有管理员才能使⽤到，⽽且那部分页⾯是动态⽣成的，我们需要⼀开始就引⼊它吗？需要特意弄个⽂件来装载它吗？最好的⽅法让这些样式与动态脚本捆绑在⼀起。我这个函数就为此⽽开发的。
  坦⽩说，它最开始是为富⽂本编辑器⽽开发的。⼤家都知道，富⽂本输⼊框最流⾏的做法是把要输⼊的内容放到iframe 中，这就涉及到两种document，⼀个主页⾯的document，另⼀个是iframe的document。iframe的document⼜涉及到兼容问题。我们可以：
ateElement('iframe');//⽣成⽤于编辑的richtexteditor
tDocument||tWindow.document;
……
  嘛，扯远了。总⽽⾔之，函数最开始的判定就是为这两种document⽽准备。如果没有涉及到iframe，我们只传⼊⼀个参数就⾏了。最后⼀个参数永远是CSS字符串。
  然后是动态⽣成styleSheet元素，把CSS字符串加⼊到此元素的问题。当然如果有现阶段的，当然就⽤现成的。DOM元素越多对游览器的负担就越⼤。我们想到document.styleSheets⽅法。它返回⼀个集合，包含style元素与link元素，还涉及⼀兼容问题，如：
复制代码代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns=" 
<head>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8"/>
<%#强制IE8像IE7⼀样呈现⽹页-%>
<metahttp-equiv=”X-UA-Compatible”content=”IE=EmulateIE7″/>
<%#--默认所有的链接都在本窗⼝打开-%>
<basetarget="_self"/>
<title><%=h(yield(:title))||controller.action_name%></title>
<%=stylesheet_link_tag"screen","button","style"%>
<linkrel="stylesheet"href="/stylesheets/print.css"type="text/css"media="print">
<!--[ifltIE8]>
<linkrel="stylesheet"href="/stylesheets/ie.css"type="text/css"media="screen">
<![endif]-->
<%=javascript_tag"window._token='#{form_authenticity_token}'"ifActionController::Base.allow_forgery_protection%>
<%=javascript_include_tag:defaults%>
<styletype="text/css"media="print"></style>
</head>
  上⾯⽤alert(document.styleSheets.length)；测试⼀下，IE返回6，W3C游览器返回5。因此，否决了它。⽽且我们只⽤到style元素，不使⽤外联。第⼆部分的判定就针对head中的style元素⽽⾔，没有就创建⼀个。然后我们把CSS字符串加在第⼀个style元素就⾏了。
  接着我们要加把保险锁，因为当media="print"时，只在页⾯打印时，定义的效果才有效。为了防⽌第⼀个style元素的media值不是screen，我们得改⼀改。
复制代码代码如下:
varstyleElement=styleElements[0];
Attribute("media");
if(media!=null&&!/screen/.LowerCase())){
styleElement.setAttribute("media","screen");
}
  附上media的⼀些说明。
  screen(缺省值)，提交到计算机屏幕；
  print，输出到打印机；
  projection，提交到投影机；
  aural，扬声器；
  braille，提交到凸字触觉感知设备；
  tty，电传打字机(使⽤固定的字体)；
  tv，电视机；
  all，所有输出设备。
  最后是如此添加的问题。分IE，⽕狐与其他游览器三种。判定游览器也⽤各⾃的私有属性或⽅法。如styleSheet是IE独⽤的，getBoxObjectFor是⽕狐独⽤的（当然你也可以使⽤(/firefox/.test(LowerCase())），通常DOM操作是最耗时的，能⽤私有就⽤私有！
  使⽤⽅法。
复制代码代码如下:
addSheet("
.RTE_iframe{width:600px;height:300px;}
.RTE_toolbar{width:600px;}
.color_result{width:216px;}
.color_view{width:110px;height:25px;}
.color_code{text-align:center;font-weight:700;color:blue;font-size:16px;}
div.table{width:176px;position:absolute;padding:1px;}
div.tabletd{font-size:12px;color:red;text-align:center;}
");*/
  对⽐⼀下51js的客服果果脚本，更短⼩，但是它会可能会创建多个style元素，还有⼀些效率的问题……毕竟我这个最初是为开发富⽂本编辑⽽开发的，功能不强⼤不⾏啊！
/*
动态添加样式表的规则
*/
iCSS={add:function(css){
varD=document,$=D.createElement('style');
$.setAttribute("type","text/css");
$.styleSheet&&($.styleSheet.cssText=css)||
$.ateTextNode(css));
}};
iCSS.add("
.dhoooListBox,.dhoooListBoxli{margin:0;padding:0;list-style-type:none;font-size:12px;cursor:default}
.dhoooListBox{border:1pxsolid#aaa;width:180px;background:#eee;height:200px;overflow:auto;float:left}
.dhoooListBoxli{margin:5px;line-height:24px;background:url(images/smilies/time.gif)no-repeat060%;padding-
left:25px;color:#555;}
.dhoooListBoxli.selected{background-color:#FFCC33}
");
  最后追加⼏个相关的⽅法:
vargetClass=function(ele){
place(/s+/,'').split('');
};
varhasClass=function(ele,cls){
returnele.className.match(newRegExp('(\s|^)'+cls+'(\s|$)'));
}
varaddClass=function(ele,cls){
if(!this.hasClass(ele,cls))ele.className+=""+cls;
}
varremoveClass=function(ele,cls){
if(hasClass(ele,cls)){
varreg=newRegExp('(\s|^)'+cls+'(\s|$)'); ele.className=place(reg,''); }
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。