js中巧用cssText属性批量操作样式

也许有人用js给html元素设置多个css属性的代码会这样写，样式多的话代码也多

<ul>   <li style='color:'blue; text-align:center; background:'#cccccc'>测试看看</li></ul>var oli= document.getElementsByTagName('li')[0]; oli.style.width = "200px"; oli.style.height = "70px";oli.style.color = "red"; 

效果图是这个样子的，样式和之前的样式合并了

其实js给元素添加多项样式，最快捷方便的是使用cssText属性，但其会重写整个style原有的值，要保留原先的style样式值

var oli= document.getElementsByTagName('li')[0]oli.style.cssText="width:200px;height:70px;color:red;" 

效果图

要保留原先的style样式值，很简单，可用一个变量记录下原先的style原始值,再做一个字符串的拼接即下面代码

var oli= document.getElementsByTagName('li')[0]var oldStyle = oli.style.cssText //老的css样式alert(oldStyle) //会弹出老的样式oli.style.cssText="width:200px;height:70px;color:red;" + oldStyle;

效果图如下，由于我们把oldStyle写在了后面 ， 所以优先级高点，color是显示老的样式

注：这里js给css加的是内联样式，根据css优先级算法浏览器自己判断的

想了解css优先级算法详解见链接详解