《
巧用cssText属性批量操作样式》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302341502013.htm
1 var head= document.getElementById("head"); 2 head.style.cssText="width:200px;height:70px;display:bolck";
1 <div style="color:red;">TEST<,
屏蔽网页图片工具栏的两种方法;/div>
给一个HTML元素设置css属性，如
发明 Google API 中应用了cssText属性，后在各浏览器中测试都通过了。一行代码即可，切实很妙。如
跟innerHTML一样，cssText很快捷且所有阅读器都支撑。此外当批量操作样式时，cssText只要一次reflow，进步了页面渲染机能。
1 function setStyle(el, strCss){ 2 var sty = el.style; 3 ,
屏幕分辨率和网页布局简述; sty.cssText = sty.cssText + strCss; 4 }
这样写太罗嗦了，为了简略些写个工具函数，如
想给该div在增加个css属性width
但cssText也有个毛病，会笼罩之前的款式。如
因而对IE6/7/8还需独自处置下，假如cssText返回值没";"则补上
1 var head= document.getElementById("head"); 2 head.style.width = "200px"; 3 head.style.height = "70px"; 4 head.style.display = "block";
1 function setStyle(obj,css){ 2 for(var atr in css){ 3 obj.style[atr] = css[atr]; 4 } 5 } 6 var head= document.getElementById("head"); 7 setStyle(head,{width:"200px",height:"70px",display:"block"})
使用该方式在IE9/Firefox/Safari/Chrome/Opera中没什么问题，但因为 IE6/7/8中cssText返回值少了分号 会让你扫兴。
01 function setStyle(el, strCss){ 02 function endsWith(str, suffix) { 03 ,
尼尔森的F型网页浏览模式; var l = str.length - suffix.length; 04 ,
少写一个`var`是如何毁掉我们网站的; return l >= 0 && str.indexOf(suffix, l) == l; 05 } 06 var sty = el.style, 07 cssText = sty.cssText; 08 if(!endsWith(cssText, ';')){ 09 cssText += ';'; 10 } 11 sty.cssText = cssText + strCss; 12 } Tag：样式 cssText属性 样式 cssText属性
这时固然width利用上了，但之前的color被覆盖丧失了,小规模低性能低流量网站设计原则。因此使用cssText时应当采取叠加的方法以保存原有的样式。
1 div.style.cssText = "width:200px;";
--> [
网站建设之]巧用cssText属性批量操作样式
(责任编辑：网站建设)
巧用cssText属性批量操作样式相关文章