JS函数实现动态添加CSS样式表文件


Posted in Javascript onDecember 15, 2012

先给出函数。

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,''); 
} 
}
Javascript 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
JavaScript 的方法重载效果
Aug 07 Javascript
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
js修改地址栏URL参数解决url参数问题
Dec 15 #Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 #Javascript
JavaScript中OnLoad几种使用方法
Dec 15 #Javascript
Javascript中自动切换焦点实现代码
Dec 15 #Javascript
treepanel动态加载数据实现代码
Dec 15 #Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 #Javascript
javascript错误的认识不用关心内存管理
Dec 15 #Javascript
You might like
农民C键的运用技巧
2020/03/04 星际争霸
php设计模式之简单工厂模式详解
2014/09/04 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
python生成随机密码或随机字符串的方法
2015/07/03 Python
python判断完全平方数的方法
2018/11/13 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
python中append实例用法总结
2019/07/30 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
《植物妈妈有办法》教学反思
2014/02/25 职场文书
大学学风建设方案
2014/05/04 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
办公室主任个人总结
2015/02/28 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
信用卡工资证明范本
2015/06/19 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
Python学习之迭代器详解
2022/04/01 Python