JS CSS封装库（上）

通过html()来获取对应的元素里的html内容，从上一篇文章继续，我们还是使用连缀的方式：

html部分

<div id="box" style="color:red;">id</div>
<input type="radio" name="sex" value="男" />
<div id="aaa">
    <p class="das">标签</p>
    <p class="das">标签</p>
    <p class="das">标签</p>
    <p class="das">标签</p>
</div>
<div id="bbb">
    <p class="das">标签</p>
    <p class="das">标签</p>
    <p class="das">标签</p>
    <p class="das">标签</p>
</div>

js调用部分：

$().getId('box').html();  //获取id为box的元素里面html内容

js封装库：

    var $ = function() {
        return new Base();
    }
    function Base() {
        this.arr = [];
        this.getId = function(id) {
            this.arr.push(document.getElementById(id));
            return this;
        }
        this.getTagName = function(tag) {
            var tags = document.getElementsByTagName(tag);
            for(var i = 0;i<tags.length;i++){
                this.arr.push(tags[i]);
            }
            return this;
        }    
    }
    Base.prototype.html = function(str) {
        for(var i = 0;i<this.arr.length;i++){
            if(arguments.length == 0){          //因为每个对应的元素都要做获取到，所以我们直接写在for语句中判断
                return this.arr[i].innerHTML;
            }
            this.arr[i].innerHTML = str;
        }
        return this;        
    }

注意：

arguments 表示这个函数中传入的参数数组，如果传入了一个参数，那么他的length就是1，没有则是0，于是我们就可以判断我们倒是是要获取还是要修改。

由于你并不知道你要获取的元素是单个的还是多个，索性就直接在for语句中一个个判断，然后一个个return出来。

通过css('color')来获取对应的css：

上一篇的js内容：

    Base.prototype.css = function(attr,value) {
        for(var i = 0;i<this.arr.length;i++){
            this.arr[i].style[attr] = value;
        }
        return this;
    }

一样我们也是使用arguments来判断，也是在for语句中：

    Base.prototype.css = function(attr,value) {
            for(var i = 0;i<this.arr.length;i++){
                if(arguments.length == 1) {
                    if(typeof window.getComputedStyle != 'undefined') {
                        return window.getComputedStyle(this.arr[i],null)[attr];
                    }else if(typeof this.arr[i].currentStyle != 'undefined') {
                        return this.arr[i].currentStyle[attr];
                    }
                    
                }
                this.arr[i].style[attr] = value;
            }
            return this;
    }

我们是要获取css内容，所以this.arr[i].style[attr]是不能满足需要的，这个只能获取到行内的css，外联和内联的css无法获取，所以我们通过window.getComputedStyle来获取计算后的css，但是由于旧版ie并不支持，所以加上currentStyle 来兼容ie。

通过.getclass('das')；class名称来获取元素：

w3c提供了getElementsByClassName方法来获取，但是会有一些兼容问题，所以常见的做法是直接获取到全部的元素节点，然后一个个做判断，直到这个元素的className是一样的，然后我们再将它提取出来（常用数组保存）。

    Base.prototype.getclass = function(className) {
        var elements = document.getElementsByTagName('*');  //获取所有的元素节点
        for(var i = 0;i < elements.length;i++){
           if(elements[i].className == className) {
               this.arr.push(elements[i])
           }
        }
        return this;
    }

拥有相同的class名称的会有多个，指定第几个getElment(x)：

我们只需要把指定第几个元素的参数传入函数中，在函数中将对应的元素传入数组即可，由于我们只需要一个，所以在传入之前需要将之前的数组重置。

    Base.prototype.getElemet = function(num) {
        var element = this.arr[num];
        this.arr = [];   //重置
        this.arr[0] = element;
        return this;    
    }

如果我们只需要id为bbb的元素下面class为das的元素更改css：

我们只需要在获取所有元素节点之前加上选择范围，也就是将document.getElementsByTagName('*')中的document改为对应的id节点。

    Base.prototype.getclass = function(className,idName) {
        var node = null;    //创建一个变量
        if(arguments.length == 2) {
            node = document.getElementById(idName);   //如果有第二个值，node则为这个id节点
        }else {
            node = document;        //只有第一个值，返回document
        }
        var elements = node.getElementsByTagName('*');
        for(var i = 0;i<elements.length;i++)  {
            if(elements[i].className == className) {
                this.arr.push(elements[i]);
            }
        }
        return this;
    }
    
    $().getclass('das','bbb').css('background','#999');     //调用