更新于

JS CSS封装库(下)

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

添加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被删除。==

暂无评论

设置
配色方案

布局