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

给一个HTML元素设置css属性，如这样写太罗嗦了，为了简单些写个工具函数，如发现 Google API 中使用了cssText属性，后在各浏览器中测试都通过了。一行代码即可，实在很妙。如和innerHTML一样，cssText很快捷且所有浏览器都支持。此外当批量操作样式时，cssText只需一次reflow，提高了页面渲染性能。但cssText也有个缺点，会覆盖之前的样式。如想给该div在添加个css属性width这时虽然width应用上了，但之前的color被覆盖丢失了。因此使用cssText时应该采用叠加的方式以保留原有的样式。使用该方法在IE9/Firefox/Safari/Chrome/Opera中没什么问题，但由于 IE6/7/8中cssText返回值少了分号 会让你失望。因此对IE6/7/8还需单独处理下，如果cssText返回值没";"则补上function setStyle(el, strCss){function endsWith(str, suffix) {var rgx=new RegExp(suffix+"$",'g');if(rgx.test(str)){return true;}return false;}var sty = el.style,cssText = sty.cssText;if(!endsWith(cssText, ';')){cssText += ';';}sty.cssText = cssText + strCss;}可以用正则去判断末尾分号，indexOf性能太低function
setStyle(el, strCss){function endsWith(str, suffix) {var rgx=new RegExp(suffix+"$",'g');if(rgx.test(str)){return true;}return false;}var sty = el.style,cssText = sty.cssText;if(!endsWith(cssText, ';')){cssText += ';';}sty.cssText = cssText + strCss;}