原生JS仿寫jQuery css方法

1.JQ方法分析:

　　jquery中css方法使用　　

         $().css(css屬性名,屬性值);
         $().css({css屬性名:屬性值,css屬性名:屬性值});

　　調用者應爲JQ對象 ,該方法參數有兩種狀況

　　1. 兩個參數:   第一個參數爲css屬性名,  第二個參數爲屬性值

　　2.參數爲一個對象,    對象的鍵和值 都以字符串形式傳入,  { css屬性名: 屬性值 }

因爲JS中全部事物皆爲對對象,所以   將該方法添加到 Object原型鏈上

 

2. 兩種經常使用的獲取DOM元素的方法

　　document.querySelector()

　　document.querySelectorAll(')

    <ul>
        <li id="li1">1</li>
        <li>2</li>
        <li>3</li>
    </ul>

<script>
    let li1=document.querySelector('#li1');
    let li=document.querySelectorAll('li');
    console.log(li1);
    console.log(li);
</script>

打印能夠發現  

querySelector獲取的是標籤元素
而querySelectorAll  獲取的是一個列表 一個僞數組

 

 　所以 當咱們爲其設置樣式的時候應分爲兩種狀況

　　　　1.  當調用對象爲單一標籤元素的時候,  直接設置其屬性樣式

　　　　 2. 當調用對象爲 Nodelist 時 要將其遍歷, 循環爲其中的標籤元素設置樣式屬性

 

綜上所述:  實現時應該能夠先判斷  傳入的參數的個數 和 類型

　　　　　而後判斷調用者是標籤元素仍是 Nodelist 數組

 

具體代碼實現以下:

    Object.prototype.css=function() {
        //判斷參數個數,若爲兩個,則視爲 css(屬性, 屬性值) 形式
        if (arguments.length == 2) {
            //根據調用對象,是否有length屬性,判斷調用者是標籤元素仍是Nodelist僞數組
            if(this.length){
                //若爲Nodelist僞數組則 遍歷Nodelist  循環爲其中的元素設置樣式
                for (let i = 0; i < this.length; i++) {
                     this[i].style[arguments[0]] = arguments[1]
                }
            }else{
                //若length屬性不存在,name直接爲this 設置style樣式
                this.style[arguments[0]] = arguments[1]
            }
        }
        //若參數只有一個,而且參數類型爲object, 視爲  css({屬性: 屬性值})
        if (arguments.length = 1 && typeof (arguments[0]) == 'object') {
            if(this.length){
                for (let i = 0; i < this.length; i++) {
                    //經過Object.assign() 方法 設置樣式
                     Object.assign(this[i].style, arguments[0])
                }
            }else{
                Object.assign(this.style, arguments[0])
            }
        }
        //能夠使其鏈式調用
        return this;
    }

 

 

使用:

    li.css('fontSize','50px').css({'color':'red','background':'green'})
    li1.css('fontSize','20px').css({'color':'gray','background':'yellow'})

 

 顯示

 

 

 

--