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

封装库-CSS[上]

在使用库的时候，我们通过 css 方法来设置某个或多个节点的样式。这里准备讨论如何获取内容和样式，并且封装一些 css 的其他方法。

一． 获取内容

在上一篇我们通过 html()方法和 css()方法可以设置标题内容和 CSS 样式，但我们如何通过这两个方法来获取内容或样式呢？比如：

alert($().getId('box').html()); //获取标题内容
alert($().getId('box').css('fontSize')); //获取 CSS 样式

要实现获取内容，其实很简单，只要判断传递过来的参数即可。

//设置或获取内容
Base.prototype.html = function (str) {
    for (var i = 0; i < this.elements.length; i ++) {
        if(arguments.length ==0) { //判断没有传参
            return this.elements[i].innerHTML; //返回内容
        } else {
            this.elements[i].innerHTML = str;
        }
    }
    return this;
}

如果要实现 CSS，那就有一些问题，如果只是行内的 style。所以，要获取 link 或者<style>样式的内容，就必须计算式样式来获取。

//设置或获取 CSS 样式
Base.prototype.css = function (attr, value) {
    for (var i = 0; i < this.elements.length; i ++) {
        if(arguments.length ==1) {
            if(typeofwindow.getComputedStyle != 'undefined') {
                return window.getComputedStyle(this.elements[i], null)[attr];
            } else if (typeof this.elements[i].currentStyle != 'undefined') {
                return this.elements[i].currentStyle[attr];
            }
        } else {
            this.elements[i].style[attr]= value;
        }
    }
    return this;
}

二．继续封装 CSS

除了通过 ID 来获取唯一性的节点，我们也可以通过 getClass()方法来获取相同的多个节点。

//获取 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;
};

有时候，我们不需要把所有获取到的 class 节点都设置 CSS，只需要某一个，我们可以筛选一下。

//获取节点数组的某一个
Base.prototype.getElement = function (num) {
    var element = this.elements[num];
    this.elements = [];
    this.elements[0] = element;
    return this;
}

class 可以设置整个网页，也就是说：可以多，可以少。而我们要求在某一个区域下的所有 class，我们只需要传递相关的节点下即可。

//假定范围区域只能是 ID
Base.prototype.getClass = function (className, idName) {
    var node= null;
    if(arguments.length ==2) {
        node = document.getElementById(idName);
    } else {
        node = document;
    }
    var all = node.getElementsByTagName('*');
};