简单说 通过JS控制CSS的各种方式（下）

版权声明：本文为博主原创文章，欢迎转载，转载请注明出处。 https://blog.csdn.net/FE_dev/article/details/77869278

说明

上次我们说了8种通过JS控制CSS的方式，但这么多方式，应该用哪一种哪？哪一种又更适合我们呢？今天我们来说说这个。

解释

我们用过的各种类库或者框架中，经常会使用到JS控制CSS的函数，比如JQuery中的css() 方法。 想明白JQuery中的css() 方法的实现原理，看这里 http://www.111cn.net/wy/jquery/97254.htm 今天我们也简单的实现一下这个方法。

//需要两个参数 el,css
//el ：DOM元素
//css ：css规则 字符串类型
function css(el, css) {
   //el如果是DOM元素，就修改元素的css
   if (!!(el && el.nodeType == 1)) {
       //确保第二个参数是字符串类型的css规则
       if (typeof css == 'string' && css.indexOf(':') > 0) {
           //元素有style对象，然后修改style对象的cssText属性
           el.style && (el.style.cssText += ';' + css);
       }

     //el如果不是DOM，就发出警告，结束方法
   } else {
       console.warn('css方法需要一个参数,这个参数必须是DOM元素');
       return;
   }
}

上面写的这个函数，已经实现了我们要的功能了，其中判断是否为DOM元素的那部分还可以继续提出来作为一个单独的方法，其中修改元素css的部分，是通过修改元素的style对象的cssText属性，这种办法修改css的优先级很高，和直接写内联样式一样。

总结

我们用JS控制CSS，我们还是要考虑css优先级的问题，为了能让设置后的css起作用，我们还是选择优先级高的方法比较好。

这里写图片描述