网页中动态加载 CSS 的四种不同方法

概述第一种添加方式： document.getElementById("elementId").style.background="#ff0000";这种方式采用内联是插入css.优先级高。容易引起页面回流性能不好 也不能进行多个样式的添加第二种方式：document.getElementsByTagName("a")[0].style.cssText="backgro…

第一种添加方式：

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+"";//增加末尾的换行符，方便在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 的四种不同方法全部内容，希望文章能够帮你解决网页中动态加载 CSS 的四种不同方法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。