转自:http://www.cnblogs.com/niuniu/archive/2010/05/03/1726303.html
好久没写文章了今天关于动态添加css文件写一点想法
- 第一种添加方式:
document.getElementById("elementId").style.background="#ff0000";
这种方式采用内联是插入css.优先级高。容易引起页面回流性能不好 也不能进行多个样式的添加
-
第二种方式:
document.getElementsByTagName("a")[0].style.cssText="background:#ff0000;border:1px#dfdfdfsolid;";
这种方式相比第一种优点是可以一次进行多个样式的设定,但仍是内联式,引起页面回流,多次插入引起性能上的消耗。
- 第三种是:直接在style标签中写,这种方法要考虑不同浏览器的兼容性问题。(声明:下面代码引用”司徒正美“的一段代码)
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+"\n";//增加末尾的换行符,方便在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))
}
}
4.动态加载css文件,这个就简单了
functionaddStyle(stylePath){
varcontainer=document.getElementsByTagName("head")[0];
varaddStyle=document.createElement("link");
addStyle.rel="stylesheet";
addStyle.type="text/css";
addStyle.media="screen";
addStyle.href=stylePath;
container.appendChild(addStyle);
}
addStyle('css/add.css');
分享到:
相关推荐
动态添加css或js链接
html css js网页设计html+css+js网页设计示例html+css+js网页设计示例html+css+js网页设计示例html+css+js网页设计示例html+css+js网页设计示例html+css+js网页设计示例html+css+js网页设计示例html+css+js网页设计...
CSS自定义图片热区示例代码,直接在HTML里,查看代码
css sprite示例源码
CSS表单显示效果示例
CSS示例文件,演示了CSS各种应用,包括CSS的语法,布局应用等等 CSS示例文件,演示了CSS各种应用,包括CSS的语法,布局应用等等
DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,div+css 是一种网页的布局方法
CSS 创建复杂图形的技术即将会被广泛支持,并且应用到实际项目中。本篇文章的目的是为大家开启它的冰山一角。我希望这篇文章能让你对不规则图形有一个初步的了解。 现在,我们已经可以使用CSS 3 常见不规则复杂图形...
CSS代码示例!!!!!!!!!!!!!!!!!!!CSS代码示例!!!!!!!!!!!!!!!!!!!
用css3开发的导航示例,不到5k就能实现,200多行代码.
用实例的方式演示CSS基本语法 共展示28个
css练习示例.rarcss练习示例.rarcss练习示例.rarcss练习示例.rar
css皮肤是一些简单的示例,它能更美观的帮你设置HTML
jsp页面中插入css样式的三种方法总结.docx
NULL 博文链接:https://kingkit.iteye.com/blog/692203
CSS学习资料和示例,包含了大量CSS的使用经典例子
css下拉菜单 代码示例,简单实用。自己原创。
CSS+DIV-盒子模型示例.zip
CSS禅意花园书中示例
学习HTML和CSS所写的笔记和代码示例学习HTML和CSS所写的笔记和代码示例 学习HTML和CSS所写的笔记和代码示例学习HTML和CSS所写的笔记和代码示例 学习HTML和CSS所写的笔记和代码示例学习HTML和CSS所写的笔记和代码示例...