JS实现博客前端页面（二）—— 封装CSS

在JS实现博客前端页面（一）中已经实现了CSS的一些基础封装，在本文中将继续封装CSS

封装getClass()方法

如果在页面中给某些元素设置了class属性，则需要使用class属性名来获取这些节点，可以封装getClass()方法，具体代码如下：

//获取class节点数组
Base.prototype.getClass=function(className){
    //首先所有的节点
    var arr = document.getElementsByTagName("*");
    for (var i=0;i<arr.length;i++){
        //判断节点的className是否与传入的class一致
        if(arr[i].className==className){
            //将一致的节点保存到elements数组中并返回object对象
            this.elements.push(arr[i]);
        }
    }
    return this;

}
window.onload=function(){
    $().getClass('red').css("color","blue").html("标题");
};

但有时候，我们不需要把所有获取到的class都设置CSS，只需要设置其中的某一个，这时我们可以进行筛选，封装getElement()方法，代码如下：

//获取某一个节点,传入节点的number值
Base.prototype.getElement=function(num){
    //获取传入num对应的element值
    var element = this.elements[num];
    //清空this.elements数组
    this.elements = [];
    //将获取的element值再加入到数组中,当前数组中只有一个值
    this.elements[0]=element;
    //返回Base对象
    return this;
}
//调用方法
window.onload=function(){
    $().getClass('red').getElement(1).css("color","red").html("title");
};

如果需要设置的css有区域的划分，如需要设置id="aaa"区域中的class='red'的color:red；id="bbb"区域中的class=‘red’的color:green;则需要在css方法中传入区域的id值，代码如下：

//获取class节点数组
Base.prototype.getClass=function(className,id){
    //定义node用于获取节点的范围
    var node=null;
    //判断传入的参数个数，如果传入两个参数，则node为传入id下的
    if(arguments.length==2){
        node = document.getElementById(id);
    }else{
        //默认时为全部节点
        node = document;
    }
    //首先所有的节点
    var arr = node.getElementsByTagName("*");
    for (var i=0;i<arr.length;i++){
        //判断节点的className是否与传入的class一致
        if(arr[i].className==className){
            //将一致的节点保存到elements数组中并返回object对象
            this.elements.push(arr[i]);
        }
    }
    return this;

}
window.onload=function(){
    $().getClass('red','aaa').css("color","red").html("title");
    $().getClass('red','bbb').css("color","green").html("title");
};

封装addClass()方法

如果我们在style样式表里设置了class a , class b的样式，并需要在指定的元素节点上可以同时应用a、b 的样式，可以封装addClass()方法，具体代码如下：

    //添加class,要求元素节点上可以同时添加多个class值,以空格隔开
    Base.prototype.addClass=function(className){
        for (var i=0;i<this.elements.length;i++){
            var element=this.elements[i];
            //判断添加的className是否已经存在,使用正则表达式
            if(!element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'))){
                element.className +=' '+className;
            }
        }
        return this;
    }
    //方法调用
    window.onload=function(){ 
    $().getId('box').addClass('b').addClass('a');
};

封装removeClass()方法

如果我们在需要移除指定的元素节点上的某个class的样式,可以封装removeClass()方法，具体代码如下：

//移除class,传入需要移除的className
Base.prototype.removeClass=function(className){
    for (var i=0;i<this.elements.length;i++){
        var element=this.elements[i];
        //判断添加的className是否已经存在,如果存在,使用正则表达式将该className替换为空格
        if(element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'))){
            element.className=element.className.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),'')
        }
    }
    return this;
}
//方法调用
window.onload=function(){ 
        $().getId('box').addClass('b').addClass('a').removeClass('b');
    };
    

以上内容来自李炎恢老师JavaScript课程实战篇笔记整理