添加class

上一篇我们通过getClass()可以获取到对应的className的元素对象，现在我们要为对象添加class

html代码：

<style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }

    .das {
        background: #eee;
    }

    .b {
        color: red;
    }

    .a {
        color: green;
    }
</style> //内联css

<div id="box" class="b">id</div>

调用代码：

$().getId('box').addClass('a');

Base库封装：

Base.prototype.addClass = function(className) {
    for (var i = 0; i < this.arr.length; i++) {
        this.arr[i].className += ‘’+className;
    }
    return this;
}

一般这样就可以完成添加class，但是实际使用上我们还要判断这className是否重复了，所以我们还要做一个判断语句。

Base.prototype.addClass = function(className) {
    for (var i = 0; i < this.arr.length; i++) {
        if (!this.arr[i].className.match(new RegExp(‘( ^ | \\s)’ + className + ‘($ | \\s)’))) {
            this.arr[i].className += ‘’+className;
        }
    }
    return this;
}

这里通过正则的方式去匹配，由于这个className有可能在开头或者在结尾，所以我们加上了^和$来对应，而且也有可能是前后是空格所以使用\s，但是斜杠是一个特殊字符，所以又加了一个\来转义，但实际使用中，我们this.arr[i].className.match(className）也是可以有的，我测试有效，看具体的使用情况吧！

既然能添加自然可以删除，我们还要做一个删除className的方法

删除className

调用方法：

$().getId('box').removeClass(‘b’);

Base库封装：

Base.prototype.removeClass = function(className) {
    for (var i = 0; i < this.arr.length; i++) {
        if (this.arr[i].className.match(new RegExp(‘( ^ | \\s)’ + className + ‘($ | \\s)’))) {
            this.arr[i].className =this.arr[i].className.replace(new RegExp(‘( ^ | \\s)’ + className + ‘($ | \\s)’),' ')
        }
    }
    return this;
}

删除的话只要match找到了，就使用replace将对应的内容替换成空格。

设置link和style中的css

调用方法：

$().addRule(0,'body','background:red;',0);  

这里我们使用了四个参数，其中第一个0为第一个style或者是link元素，毕竟我们要想修改内联和外联的css就需要使用sheets，它是一个style和link的集合数组，所以我们要想修改，要先指定修改的是数组中的哪个元素。

body就是选择器了，第三个参数就是css的内容，第四个参数就是你要插入的位置。

==注：这个位置指的这个sheets数组中的位置，不是你在编辑器上看到的那个每行代码对应的行号！==

Base库封装：

Base.prototype.addRule = function(num, selectorText, cssText, position) {
    var sheets = document.styleSheets[num];
    if (typeof sheets.insertRule != 'undefined') {
        sheets.insertRule(selectorText + '{' + cssText + '}', position);
    } else if (typeof sheets.addRule != 'undefined') {
        sheets.addRule(selectorText, cssText, position);
    }
    return this;
}

w3c使用insertRule (x,y);x=完整的css，也就是body{background:red;};y=添加的位置；

旧版IE使用的是addRule(x,y,z),x=选择器body；y=css内容；z=添加的位置；

删除link和style中的css

调用方法：

$().removeRule(0,0);  

第一个参数是sheets中的第几个元素对象，第二个参数是要删除这个sheets数值集合中的第几个参数。

Base库封装：

Base.prototype.removeRule= function(num,position) {
    var sheets = document.styleSheets[num];
    if (typeof sheets.deleteRule != 'undefined') {
        sheets.deleteRule (position);
    } else if (typeof sheets.removeRule != 'undefined') {
        sheets.removeRule (position);
    }
    return this;
}

W3c使用deleteRule ，IE使用removeRule ，他们都只支持一个参数，这个参数就是你要删除的那个位置，如果是第一个就填0，如果下一次你要删除第二个，那么你还是填0，因为你删除了第一个后，第二个上位，第二个就成了0了，以此类推。

==注：这个方法删除并没有改动原文件，只是在解析的时候对应的css被删除。==