动态添加样式表规则

转自 http://www.cnblogs.com/rubylouvre/archive/2009/07/14/1523104.html

有时我们需要在.js文件对文档动态引入一些CSS样式。对于一些短小的CSS代码来说

ddd.style.cssText = "border:1px solid red;color:#000;background:#444;float:left";

如果很长，我们可以动态导入一CSS文件。如

function addSheetFile(path){
var fileref=document.createElement("link")
fileref.rel = "stylesheet";
fileref.type = "text/css";
fileref.href = path;
fileref.media="screen";
var headobj = document.getElementsByTagName('head')[0];
headobj.appendChild(fileref);
}

几个相关的方法:

var getClass = function(ele) {
return ele.className.replace(/s+/,' ').split(' ');
};
var hasClass = function(ele,cls) {
return ele.className.match(new RegExp('(\s|^)'+cls+'(\s|$)'));
}
//更快的版本
var hasClass =function(ele,cls){
return -1 < (" "+ele.className+" ").indexOf(" "+cls+" ");
}
var addClass = function(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
var removeClass = function(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\s|^)'+cls+'(\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}