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

说明

上次我们说了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起作用，我们还是选择优先级高的方法比较好。