jQuery动态添加样式

jQuery动态添加样式
转自：http://blog.csdn.net/bj_benjamin/article/details/9125097

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