原生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'})

 

 显示

 

 

 

--