木灵鱼儿

博客
正在进入:首页

更新于

JS CSS封装库(上)

发布于 / 分类: JavaScript / 暂无评论 / 阅读量: 583

通过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');     //调用
Info
Site Info

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了173篇文章

目录树
Archive
Article Archive
Weather
Weather

湿度
设置
配色方案

宽度

现在购买