一个前端博客（3）——添加addClass() removeClass() addRule() removeRule()方法

增加addClass()方法

首先创建addClass方法：

Tar.prototype.addClass = function(className){
    for(var i = 0; i < this.elements.length; i++) {
       
    }
    return this;
}

 

我们通过元素的className属性来添加className：

this.elements[i].className += className;

但是这样会出一个问题，你多次添加类的话会连在一起，同时如果添加的有重复，就不需要添加了，所以这里我们修改上面得代码:

this.elements[i].className += ’ ‘+ className;

同时：我们通过正则来判断此时的className是否存在我们要添加的，不存在，则添加,最后完整代码如下:

Tar.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;
}

移除className

类似添加className，只不过我们要判断当前className是否在存在，若存在，则通过正则的replace方法，替换成“”，代码如下:

//移除Class
Tar.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;
}

添加link或者style的css规则

这里关键是要注意添加样式规则的兼容性问题，在W3C中是通过insertRule()这个方法接受两个参数：规则文本和表示在那里插入规则的索引。而IE中是通过addRule(),接受两必选参数：选择符文本和CSS样式信息；一个可选参数：插入规则的位置。兼容性解决方案也是我们常用的typeof方法:

if(typeof sheet.insertRule != 'undefined') {
      //W3C
}
else if(typeof sheet.addRule != 'undefined') {
     //IE
}

完整代码如下:

//添加link或者style的css规则
Tar.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;
}

删除link或者style的css规则

和上面得添加类似，删除样式规则的方法:W3C中是deleteRule(index), IE中时removeRule(index).这两个方法接受一个参数：要删除的规则的位置。

代码如下:

//删除link或者style的css规则
Tar.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;
}

待续。。。。