摘要:[javascript]  添加CSS的方式有行内式、嵌入式、外链式、导入式  a)动态引入样式表文件:  function loadLink(url){      var link = document.createElement("link");      link.type = "text/css";      link.rel  = "stylesheet";      link.href  = url;      var head = document.getElmentsByTagName("head")[0];      head.appendChild(link);  }  b)嵌入式:  function insertStyles(){      var doc,cssCode=[],cssText;      var len = arguments.length;      var head,style,firstStyle;      if(len == 1){          doc = document;          cssCode.push(arguments[0])      }else if(len == 2){          doc = arguments[0];          cssCode.push(arguments[1]);      }else{          alert("函数最多接收两个参数!");      }      head = doc.getElementsByTagName("head")[0];      styles= head.getElementsByTagName("style");      if(styles.length == 0){          if(doc.createStyleSheet){//ie               doc.createStyleSheet();          }else{//FF               var tempStyle = doc.createElement("style");              tempStyle.setAttibute("type","text/css");              head.appendChild(tempStyle);          }      }      firstStyle = styles[0];      cssText=cssCode.join("/n");      if(!+"/v1"){//opacity兼容           var str = cssText.match(/opacity:(/d?/./d+);/);           if(str!=null){              cssText = cssText.replace(str[0],"filter:alpha(opacity="+pareFloat(str[1])*100+")");          }      }      if(firstStyle.styleSheet){          firstStyle.styleSheee.cssText += cssText;      }else if(doc.getBoxObjectFor){          firstStyle.innerHTML += cssText;      }else{          firstStyle.appendChild(doc.createTextNode(cssText));      }  }  c)行内式:  var addStyle=function (ele,str){      var s = ele.getAttribute("style"),styles;      if(str && typeof str === "string"){          if(!s){              ele.style.cssText = str;          }else{              if(s == '[object]'){//IE6/7 e.getAttribute("style")返回[object]                   s=ele.style.cssText;              }              styles= trim(s).split(";");              for (var i=0,len=styles.length; i<len; i++){                  var style_i=trim(styles[i]);                  var attr=style_i.split(":")[0];                  if(str.indexOf(attr)>-1){                      styles[i]="";                  }else{                      styles[i]=style_i;                  }              }              ele.style.cssText= styles.join("")+";"+str;          }      }  }  d)导入式:  import "index.css";    操作CSS 类相关的方法:  var hasClass=function(ele,value){      var rclass = /[/n/t/r]/g,          value=" "+value+" ";      return (ele.nodeType==1)&&(" "+ele.className+" ").replace(rclass," ").indexOf(value)>-1;  }  var trim=function (val){      return val.replace(/(^/s+)|(/s+$)/g,"");  }  var addClass=function(ele,value){      var rspace = //s+/,classNames,getClass;      if(value&&typeof value === "string"){          classNames = value.split(rspace);          if(ele.nodeType === 1){              if(!ele.className && classNames.length == 1){                  ele.className = value;              }else{                  getClass = " "+ele.className+" ";                  for(var i=0,len=classNames.length; i<len ;i++){                      var cname=classNames[i];                      if(!hasClass(ele,cname)){                          getClass += cname+" ";                      }                  }                  ele.className = trim(getClass);              }          }      }  }    var removeClass=function(ele,value){      var rclass = /[/n/t/r]/g,classNames,getClass;      if((value&&typeof value === "string")||value === undefined){          classNames = (value||"").split(rspace);          if(ele.nodeType === 1 && ele.className){              if(value){//存在查找要移除的类                   getClass =  " "+ele.className+" ".replace(rclass," ");//左右空格,为了使类中各类间均等,方便后面替换                   for(var i=0,len=classNames.length; i<len; i++){                      getClass = getClass.replace(" "+classNames[i]+" "," ")                  }                  ele.className=trim(getClass);              }else{//不存在移除所有类                   ele.className = "";              }          }      }  }  var toggleClass=function(ele,value){      if(typeof value === "string"){          if(hasClass(ele,value)){              removeClass(ele,value);          }else{              addClass(ele,value);          }      }  } 

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

[javascript] 
添加CSS的方式有行内式、嵌入式、外链式、导入式 
a)动态引入样式表文件: 
function loadLink(url){ 
    var link = document.createElement("link"); 
    link.type = "text/css"; 
    link.rel  = "stylesheet"; 
    link.href  = url; 
    var head = document.getElmentsByTagName("head")[0]; 
    head.appendChild(link); 

b)嵌入式: 
function insertStyles(){ 
    var doc,cssCode=[],cssText; 
    var len = arguments.length; 
    var head,style,firstStyle; 
    if(len == 1){ 
        doc = document; 
        cssCode.push(arguments[0]) 
    }else if(len == 2){ 
        doc = arguments[0]; 
        cssCode.push(arguments[1]); 
    }else{ 
        alert("函数最多接收两个参数!"); 
    } 
    head = doc.getElementsByTagName("head")[0]; 
    styles= head.getElementsByTagName("style"); 
    if(styles.length == 0){ 
        if(doc.createStyleSheet){//ie  
            doc.createStyleSheet(); 
        }else{//FF  
            var tempStyle = doc.createElement("style"); 
            tempStyle.setAttibute("type","text/css"); 
            head.appendChild(tempStyle); 
        } 
    } 
    firstStyle = styles[0]; 
    cssText=cssCode.join("/n"); 
    if(!+"/v1"){//opacity兼容  
        var str = cssText.match(/opacity:(/d?/./d+);/);  
        if(str!=null){ 
            cssText = cssText.replace(str[0],"filter:alpha(opacity="+pareFloat(str[1])*100+")"); 
        } 
    } 
    if(firstStyle.styleSheet){ 
        firstStyle.styleSheee.cssText += cssText; 
    }else if(doc.getBoxObjectFor){ 
        firstStyle.innerHTML += cssText; 
    }else{ 
        firstStyle.appendChild(doc.createTextNode(cssText)); 
    } 

c)行内式: 
var addStyle=function (ele,str){ 
    var s = ele.getAttribute("style"),styles; 
    if(str && typeof str === "string"){ 
        if(!s){ 
            ele.style.cssText = str; 
        }else{ 
            if(s == '[object]'){//IE6/7 e.getAttribute("style")返回[object]  
                s=ele.style.cssText; 
            } 
            styles= trim(s).split(";"); 
            for (var i=0,len=styles.length; i<len; i++){ 
                var style_i=trim(styles[i]); 
                var attr=style_i.split(":")[0]; 
                if(str.indexOf(attr)>-1){ 
                    styles[i]=""; 
                }else{ 
                    styles[i]=style_i; 
                } 
            } 
            ele.style.cssText= styles.join("")+";"+str; 
        } 
    } 

d)导入式: 
import "index.css"; 
 
操作CSS 类相关的方法: 
var hasClass=function(ele,value){ 
    var rclass = /[/n/t/r]/g, 
        value=" "+value+" "; 
    return (ele.nodeType==1)&&(" "+ele.className+" ").replace(rclass," ").indexOf(value)>-1; 

var trim=function (val){ 
    return val.replace(/(^/s+)|(/s+$)/g,""); 

var addClass=function(ele,value){ 
    var rspace = //s+/,classNames,getClass; 
    if(value&&typeof value === "string"){ 
        classNames = value.split(rspace); 
        if(ele.nodeType === 1){ 
            if(!ele.className && classNames.length == 1){ 
                ele.className = value; 
            }else{ 
                getClass = " "+ele.className+" "; 
                for(var i=0,len=classNames.length; i<len ;i++){ 
                    var cname=classNames[i]; 
                    if(!hasClass(ele,cname)){ 
                        getClass += cname+" "; 
                    } 
                } 
                ele.className = trim(getClass); 
            } 
        } 
    } 

 
var removeClass=function(ele,value){ 
    var rclass = /[/n/t/r]/g,classNames,getClass; 
    if((value&&typeof value === "string")||value === undefined){ 
        classNames = (value||"").split(rspace); 
        if(ele.nodeType === 1 && ele.className){ 
            if(value){//存在查找要移除的类  
                getClass =  " "+ele.className+" ".replace(rclass," ");//左右空格,为了使类中各类间均等,方便后面替换  
                for(var i=0,len=classNames.length; i<len; i++){ 
                    getClass = getClass.replace(" "+classNames[i]+" "," ") 
                } 
                ele.className=trim(getClass); 
            }else{//不存在移除所有类  
                ele.className = ""; 
            } 
        } 
    } 

var toggleClass=function(ele,value){ 
    if(typeof value === "string"){ 
        if(hasClass(ele,value)){ 
            removeClass(ele,value); 
        }else{ 
            addClass(ele,value); 
        } 
    } 

添加CSS的方式有行内式、嵌入式、外链式、导入式
a)动态引入样式表文件:
function loadLink(url){
 var link = document.createElement("link");
 link.type = "text/css";
 link.rel  = "stylesheet";
 link.href  = url;
 var head = document.getElmentsByTagName("head")[0];
 head.appendChild(link);
}
b)嵌入式:
function insertStyles(){
 var doc,cssCode=[],cssText;
 var len = arguments.length;
 var head,style,firstStyle;
 if(len == 1){
  doc = document;
  cssCode.push(arguments[0])
 }else if(len == 2){
  doc = arguments[0];
  cssCode.push(arguments[1]);
 }else{
  alert("函数最多接收两个参数!");
 }
 head = doc.getElementsByTagName("head")[0];
 styles= head.getElementsByTagName("style");
 if(styles.length == 0){
  if(doc.createStyleSheet){//ie
   doc.createStyleSheet();
  }else{//FF
   var tempStyle = doc.createElement("style");
   tempStyle.setAttibute("type","text/css");
   head.appendChild(tempStyle);
  }
 }
 firstStyle = styles[0];
 cssText=cssCode.join("/n");
 if(!+"/v1"){//opacity兼容
  var str = cssText.match(/opacity:(/d?/./d+);/);
  if(str!=null){
   cssText = cssText.replace(str[0],"filter:alpha(opacity="+pareFloat(str[1])*100+")");
  }
 }
 if(firstStyle.styleSheet){
  firstStyle.styleSheee.cssText += cssText;
 }else if(doc.getBoxObjectFor){
  firstStyle.innerHTML += cssText;
 }else{
  firstStyle.appendChild(doc.createTextNode(cssText));
 }
}
c)行内式:
var addStyle=function (ele,str){
 var s = ele.getAttribute("style"),styles;
 if(str && typeof str === "string"){
  if(!s){
   ele.style.cssText = str;
  }else{
   if(s == '[object]'){//IE6/7 e.getAttribute("style")返回[object]
    s=ele.style.cssText;
   }
   styles= trim(s).split(";");
   for (var i=0,len=styles.length; i<len; i++){
    var style_i=trim(styles[i]);
    var attr=style_i.split(":")[0];
    if(str.indexOf(attr)>-1){
     styles[i]="";
    }else{
     styles[i]=style_i;
    }
   }
   ele.style.cssText= styles.join("")+";"+str;
  }
 }
}
d)导入式:
import "index.css";

操作CSS 类相关的方法:
var hasClass=function(ele,value){
 var rclass = /[/n/t/r]/g,
  value=" "+value+" ";
 return (ele.nodeType==1)&&(" "+ele.className+" ").replace(rclass," ").indexOf(value)>-1;
}
var trim=function (val){
 return val.replace(/(^/s+)|(/s+$)/g,"");
}
var addClass=function(ele,value){
 var rspace = //s+/,classNames,getClass;
 if(value&&typeof value === "string"){
  classNames = value.split(rspace);
  if(ele.nodeType === 1){
   if(!ele.className && classNames.length == 1){
    ele.className = value;
   }else{
    getClass = " "+ele.className+" ";
    for(var i=0,len=classNames.length; i<len ;i++){
     var cname=classNames[i];
     if(!hasClass(ele,cname)){
      getClass += cname+" ";
     }
    }
    ele.className = trim(getClass);
   }
  }
 }
}

var removeClass=function(ele,value){
 var rclass = /[/n/t/r]/g,classNames,getClass;
 if((value&&typeof value === "string")||value === undefined){
  classNames = (value||"").split(rspace);
  if(ele.nodeType === 1 && ele.className){
   if(value){//存在查找要移除的类
    getClass =  " "+ele.className+" ".replace(rclass," ");//左右空格,为了使类中各类间均等,方便后面替换
    for(var i=0,len=classNames.length; i<len; i++){
     getClass = getClass.replace(" "+classNames[i]+" "," ")
    }
    ele.className=trim(getClass);
   }else{//不存在移除所有类
    ele.className = "";
   }
  }
 }
}
var toggleClass=function(ele,value){
 if(typeof value === "string"){
  if(hasClass(ele,value)){
   removeClass(ele,value);
  }else{
   addClass(ele,value);
  }
 }
}

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接: http://www.js-code.com/js/js_8811.html