JS函数实现动态添加CSS样式表文件
版权申诉
5星 · 超过95%的资源 86 浏览量
2020-12-10
19:02:25
上传
评论
收藏 75KB PDF 举报 
JS函数实现动态添加函数实现动态添加CSS样式表文件样式表文件
先给出函数。
代码如下:
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;
评论10
最新资源