javascript動態添加樣式(行內式/嵌入式/外鏈式等規則)

2019-11-20 22:37:31

字體：大中小

來源：轉載

供稿：網友

添加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); 
} 
} 
} 