版权声明:本文为博主原创文章,欢迎转载,转载请注明出处。 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起作用,我们还是选择优先级高的方法比较好。