0%

JS CSS封装库(下)

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

最后更新于 2018年11月13日

添加class

上一篇我们通过getClass()可以获取到对应的className的元素对象,现在我们要为对象添加class

html代码:

<style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }

    .das {
        background: #eee;
    }

    .b {
        color: red;
    }

    .a {
        color: green;
    }
</style> //内联css

<div id="box" class="b">id</div>

调用代码:

$().getId('box').addClass('a');

Base库封装:

Base.prototype.addClass = function(className) {
    for (var i = 0; i < this.arr.length; i++) {
        this.arr[i].className += ‘’+className;
    }
    return this;
}

一般这样就可以完成添加class,但是实际使用上我们还要判断这className是否重复了,所以我们还要做一个判断语句。

Base.prototype.addClass = function(className) {
    for (var i = 0; i < this.arr.length; i++) {
        if (!this.arr[i].className.match(new RegExp(‘( ^ | \\s)’ + className + ‘($ | \\s)’))) {
            this.arr[i].className += ‘’+className;
        }
    }
    return this;
}

这里通过正则的方式去匹配,由于这个className有可能在开头或者在结尾,所以我们加上了^和$来对应,而且也有可能是前后是空格所以使用s,但是斜杠是一个特殊字符,所以又加了一个来转义,但实际使用中,我们this.arr[i].className.match(className)也是可以有的,我测试有效,看具体的使用情况吧!

既然能添加自然可以删除,我们还要做一个删除className的方法

删除className

调用方法:

$().getId('box').removeClass(‘b’);

Base库封装:

Base.prototype.removeClass = function(className) {
    for (var i = 0; i < this.arr.length; i++) {
        if (this.arr[i].className.match(new RegExp(‘( ^ | \\s)’ + className + ‘($ | \\s)’))) {
            this.arr[i].className =this.arr[i].className.replace(new RegExp(‘( ^ | \\s)’ + className + ‘($ | \\s)’),' ')
        }
    }
    return this;
}

删除的话只要match找到了,就使用replace将对应的内容替换成空格。

设置link和style中的css

调用方法:

$().addRule(0,'body','background:red;',0);  

这里我们使用了四个参数,其中第一个0为第一个style或者是link元素,毕竟我们要想修改内联和外联的css就需要使用sheets,它是一个style和link的集合数组,所以我们要想修改,要先指定修改的是数组中的哪个元素。

body就是选择器了,第三个参数就是css的内容,第四个参数就是你要插入的位置。

==注:这个位置指的这个sheets数组中的位置,不是你在编辑器上看到的那个每行代码对应的行号!==

Base库封装:

Base.prototype.addRule = function(num, selectorText, cssText, position) {
    var sheets = document.styleSheets[num];
    if (typeof sheets.insertRule != 'undefined') {
        sheets.insertRule(selectorText + '{' + cssText + '}', position);
    } else if (typeof sheets.addRule != 'undefined') {
        sheets.addRule(selectorText, cssText, position);
    }
    return this;
}

w3c使用insertRule (x,y);x=完整的css,也就是body{background:red;};y=添加的位置;

旧版IE使用的是addRule(x,y,z),x=选择器body;y=css内容;z=添加的位置;

删除link和style中的css

调用方法:

$().removeRule(0,0);  

第一个参数是sheets中的第几个元素对象,第二个参数是要删除这个sheets数值集合中的第几个参数。

Base库封装:

Base.prototype.removeRule= function(num,position) {
    var sheets = document.styleSheets[num];
    if (typeof sheets.deleteRule != 'undefined') {
        sheets.deleteRule (position);
    } else if (typeof sheets.removeRule != 'undefined') {
        sheets.removeRule (position);
    }
    return this;
}

W3c使用deleteRule ,IE使用removeRule ,他们都只支持一个参数,这个参数就是你要删除的那个位置,如果是第一个就填0,如果下一次你要删除第二个,那么你还是填0,因为你删除了第一个后,第二个上位,第二个就成了0了,以此类推。

==注:这个方法删除并没有改动原文件,只是在解析的时候对应的css被删除。==

为博客文章加上标签 JS 下拉菜单
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao