jQuery原理：操作css

Posted 2021-04-08 个人前端小技巧

jQuery中的css方法非常便利，它可以查询css指定类的值，可以更改指定类的值，还可以设置多个类的值

如果传入一个参数，则返回传入类的值

在这里编写一个div 宽高均为100px，背景颜色为红色

如果传入div.css("height","200px") 则会将div的高度更换为200px，这里就不论证

如果传入的是一个对象，则会将对象里面的各个类更换为对应值：

原生js如何实现的呢？

function css(dom,attr,value){  if(typeof attr === "string"){    if(arguments.length==2){    // 如果传入参数只有2个，则返回css值       if(window.getComputedStyle){       // window.getComputedStyle方法存在，则利用该方法获取css值         return window.getComputedStyle(dom)[attr];       }else{       // 低版本ie不兼容上面的方法，用以下方法获取css的值         return dom.currentStyle[attr];       }    }else{    // 传入参数不是两个的情况下      dom.style[attr]=value;    }  }else if(typeof attr === "object"){    // 如果传入的attr是一个对象，则遍历对象并将类和值以此添加    for(var key in attr){      dom.style[key]=attr[key]    }  }  return dom;}

用上面自定义函数就可以实现跟jQuery中的css方法一样，不同点在于jQuery中调用css方法的是jQuery对象，而在这里我们是直接调用函数，两者基本没有区别

谢谢观看！