【转载】浅谈如何封装css —— 添加及删除class/link

<pre>
// JavaScript Document
//前台调用
var $ = function() {
return new Base();
};
//基础类
function Base() {
//创建一个类
//创建一个数组来获取一个节点和节点数组
this.elements = [];
}
</pre>
<pre>
//创建一个数组来获取一个节点和节点数组
//Base.prototype.elements=[];这是是在类外面定义的，所以要把它放在类里面进行私有化
Base.prototype.getId = function(id) {
this.elements.push(document.getElementById(id));
return this;
};
</pre>
<pre>
//获取元素节点
Base.prototype.getTagName = function(tag) {
var tags = document.getElementsByTagName(tag);
for (var i = 0; i < tags.length; i++) {
this.elements.push(tags[i]);
}
return this;
};
</pre>
<pre>
//获取Class节点的信息
Base.prototype.getClass = function(className) {
var all = document.getElementsByTagName('*');
for (var i = 0; i < all.length; i++) {
if (all[i].className == className) {
this.elements.push(all[i]);
}
}
return this;
};
</pre>
<pre>
//获取某一个节点
Base.prototype.getElement = function(num) {
var element = this.elements[num];
this.elements = [];
this.elements[0] = element;
return this;
};
</pre>
<pre>
//设置CSS
Base.prototype.css = function(attr, value) { //这里的参数是两个
for (var i = 0; i < this.elements.length; i++) {
if (arguments.length == 1) { //当传入的参数的长度等于1的时候（只传入属性），就返回这个元素的style
//这个只能获取行内样式，不能获取css中的样式
//return this.elements[i].style[attr];
//Dom中getComputedStyle方法可用来获取元素中所有可用的css属性列表，以数组形式返回，并且是readonly的。
//IE中则用currentStyle代替。
// 语法：arr_style=window.getComputedStyle(elem_id,ov)
if (typeof window.getComputedStyle != 'undefined') { //W3C
return window.getComputedStyle(this.elements[i], null)[attr];
} else if (typeof this.elements[i].currentStyle != 'undefined') { //IE
return this.elements[i].currentStyle[attr];
}
}
this.elements[i].style[attr] = value;
}
return this;
};
</pre>
<pre>
//设置innerHTML
Base.prototype.html = function(str) {
for (var i = 0; i < this.elements.length; i++) {
//这里判断传入的参数是否为0个，如果是0个则获取这个的innerHTML
if (arguments.length == 0) {
return this.elements[i].innerHTML; //一旦这么设置就不能实现连缀了
}
this.elements[i].innerHTML = str;
}
return this;
};
</pre>
<pre>
//添加class属性
Base.prototype.addClass = function(className) {
//先循环一下，看有多少个颜色
for (var i = 0; i < this.elements.length; i++) {
if (!this.elements[i].className.match(new RegExp(('//s|^') + className + '(//s|$)'))) {
//查看传进来的属性原来是否存在
this.elements[i].className += ' ' + className;
}
}
return this;
};
</pre>
<pre>
//删除class属性
Base.prototype.removeClass = function(className) {
for (var i = 0; i < this.elements.length; i++) {
if (!this.elements[i].className.match(new RegExp(('//s|^') + className + '(//s|$'))) { //查看传进来的属性原来是否存在
this.elements[i].className = this.elements[i].className.replace(new RegExp(('//s|^') + className + '(//s|$)'), ' ');
}
}
return this;
};
</pre>

<pre>
//添加link或style的CSS规则
Base.prototype.addRule = function(num, selectorText, cssText, position) {
var sheet = document.styleSheets[num];
if (typeof sheet.insertRule != 'undefined') { //w3c
sheet.insertRule(selectorText + '{' + cssText + '}', position);
} else if (typeof sheet.addRule != 'undefined') { //ie
sheet.addRule(selectorText, cssText, position);
}
return this; //返回this才能实行连缀功能
};
</pre>
<pre>
//删除link或style的CSS规则
Base.prototype.removeRule = function(num, index) {
var sheet = document.styleSheets[num];
if (typeof sheet.deleteRule != 'undefined') { //W3C
sheet.deleteRule(index);
} else if (typeof sheet.removeRule != 'undefined') { //IE
sheet.removeRule(index);
}
return this;
};
</pre>
<pre>
//设置点击事件
Base.prototype.click = function(fn) {
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].onclick = fn;
}
return this;
};
</pre>
<pre>
// JavaScript Document
window.onload = function() {
//因为在base里面，返回的是一个base对象，而他本身也没有设置html对象
//这里这么设置也是不需要实现连缀功能的
$().getId('box').html();

// 获取class为red的第二个元素并设置css
$().getClass('red').getElement(2).css('color', 'green');

// 设置颜色
$().getId('box').css('color','red');

// 增加class
$().getId('pox').addClass('a').addClass('b');

// 增加/删除class
$().getId('pox').addClass('a').addClass('b').removeClass('a');
$().addRule(0,'body','background:green',0).addRule(0,'div','font-size:150px',0);
$().removeRule(0,0);

}
</pre>