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課程實戰篇筆記整理