先给出函数。
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){ cssCode=cssCode.replace(t[0],"filter:alpha(opacity="+parseFloat(t[1])*100+")") } } cssCode=cssCode+" ";//增加末尾的换行符,方便在firebug下的查看。 varheadElement=doc.getElementsByTagName("head")[0]; varstyleElements=headElement.getElementsByTagName("style"); if(styleElements.length==0){//如果不存在style元素则创建 if(doc.createStyleSheet){//ie doc.createStyleSheet(); }else{ vartempStyleElement=doc.createElement('style');//w3c tempStyleElement.setAttribute("type","text/css"); headElement.appendChild(tempStyleElement); } } varstyleElement=styleElements[0]; varmedia=styleElement.getAttribute("media"); if(media!=null&&!/screen/.test(media.toLowerCase())){ styleElement.setAttribute("media","screen"); } if(styleElement.styleSheet){//ie styleElement.styleSheet.cssText+=cssCode; }elseif(doc.getBoxObjectFor){ styleElement.innerHTML+=cssCode;//火狐支持直接innerHTML添加样式表字串 }else{ styleElement.appendChild(doc.createTextNode(cssCode)) } }
有时我们需要在.js文件对文档动态引入一些CSS样式。对于一些短小的CSS代码来说,这好办,我们可以调用其style方法,如
varddd=document.getElementById("ddd"); ddd.style.border="1pxsolidred";
如果再长一点也无所谓:
varddd=document.getElementById("ddd"); ddd.style.cssText="border:1pxsolidred;color:#000;background:#444;float:left";
本人而言,我是喜欢后者。因为前者有严重的兼容问题。如float这个样式,在IE是styleFloat,在火狐等W3C标准游览器是cssFloat。而cssText则是通吃。
如果很长,我们可以动态导入一CSS文件。如
functionaddSheetFile(path){ varfileref=document.createElement("link") fileref.rel="stylesheet"; fileref.type="text/css"; fileref.href=path; fileref.media="screen"; varheadobj=document.getElementsByTagName('head')[0]; headobj.appendChild(fileref); }
这个函数在IE中有点累赘。我向来是支持哪个游览器就用哪个游览器的原生函数,直接使用二进制代码效率最高。
varoStylesheet=document.createStyleSheet(sURL,iIndex);
createStyleSheet带的两个参数都是可选的。
但如果我们的样式是某个页面独有的,而且只有管理员才能使用到,而且那部分页面是动态生成的,我们需要一开始就引入它吗?需要特意弄个文件来装载它吗?最好的方法让这些样式与动态脚本捆绑在一起。我这个函数就为此而开发的。
坦白说,它最开始是为富文本编辑器而开发的。大家都知道,富文本输入框最流行的做法是把要输入的内容放到iframe中,这就涉及到两种document,一个主页面的document,另一个是iframe的document。iframe的document又涉及到兼容问题。我们可以:
variframe=document.createElement('iframe');//生成用于编辑的richtexteditor
variframeDocument=iframe.contentDocument||iframe.contentWindow.document;
……
嘛,扯远了。总而言之,函数最开始的判定就是为这两种document而准备。如果没有涉及到iframe,我们只传入一个参数就行了。最后一个参数永远是CSS字符串。
然后是动态生成styleSheet元素,把CSS字符串加入到此元素的问题。当然如果有现阶段的,当然就用现成的。DOM元素越多对游览器的负担就越大。我们想到document.styleSheets方法。它返回一个集合,包含style元素与link元素,还涉及一兼容问题,如:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/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]; varmedia=styleElement.getAttribute("media"); if(media!=null&&!/screen/.test(media.toLowerCase())){ styleElement.setAttribute("media","screen"); }
附上media的一些说明。
screen(缺省值),提交到计算机屏幕;
print,输出到打印机;
projection,提交到投影机;
aural,扬声器;
braille,提交到凸字触觉感知设备;
tty,电传打字机(使用固定的字体);
tv,电视机;
all,所有输出设备。
最后是如此添加的问题。分IE,火狐与其他游览器三种。判定游览器也用各自的私有属性或方法。如styleSheet是IE独用的,getBoxObjectFor是火狐独用的(当然你也可以使用(/firefox/.test(navigator.userAgent.toLowerCase())),通常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)|| $.appendChild(D.createTextNode(css)); D.getElementsByTagName('head')[0].appendChild($); }}; 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){ returnele.className.replace(/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=ele.className.replace(reg,''); } }
JS函数实现动态添加CSS样式表文件
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@