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 相关文章推荐
JavaScript 调试器简介
Feb 21 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 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
PHP类继承 extends使用介绍
2014/01/14 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
php实现webservice实例
2014/11/06 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
清空上传控件input file的值
2010/07/03 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
详解JS模块导入导出
2017/12/20 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
Python3基础之输入和输出实例分析
2014/08/18 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
运行Python编写的程序方法实例
2020/10/21 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
自我评价是什么
2014/01/04 职场文书
就业表自我评价分享
2014/02/06 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
国庆庆典邀请函
2015/02/02 职场文书
城南旧事读书笔记
2015/06/29 职场文书
Python爬取某拍短视频
2021/06/11 Python
Golang连接并操作MySQL
2022/04/14 MySQL