• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

JS CSS封装库(上)

153 0

通过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');     //调用
0
  • 本文分类:JavaScript
  • 本文标签:CSS封装库CSS封装库(上)
  • 流行热度:已超过 153 人围观了本文
  • 最后更新:2018年11月13日 - 0时34分29秒
  • 发布日期:2018年11月12日 - 16时05分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码