[js项目]封装库-CSS[下]

封装库-CSS[下]

本篇，我们继续封装 CSS，主要探讨添加 class 和移除 class。并且能够添加 style 和link 元素的 css 规则。

一． 获取节点问题

在获取 ID、TagName、Class 节点上，我们把 this.elements 放到了外部，导致实例化的this.elements 变成了公有化，所以，这个数组，我们必须放到内部。

二． 继续封装 CSS

在节点上添加一个 class，这个知识点我们在之前已经学习过：

//添加 CLASSBase.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;}

//移除 CLASSBase.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 规则Base.prototype.addRule = function (num,selectorText, cssText,position) {    var sheet = document.styleSheets[num];    if(typeofsheet.insertRule != 'undefined') {        sheet.insertRule(selectorText + "{" + cssText + "}", position);    } else if (typeof sheet.addRule != 'undefined') {        sheet.addRule(selectorText, cssText, position);    }};

//移除 link 或 style中的 CSS 规则Base.prototype.removeRule = function (num, index) {    var sheet = document.styleSheets[num];    if(typeofsheet.deleteRule != 'undefined') {        sheet.deleteRule(index);    } else if (typeof sheet.removeRule) {        sheet.removeRule(index);    }    return this;};

PS：在 Web 应用中，很少用到添加 CSS 规则和移除 CSS 规则，一般只用行内和 Class ；因为添加和删除原本的规则会破坏整个 CSS 的结构，所以使用需要非常小心。