JS中给一个html元素设置css属性,可以通过style属性来操作
var head= document.getElementById("head"); head.style.width = "200px"; head.style.height = "70px"; head.style.display = "block";
如果要设置的样式很多,这样写太罗嗦了,而且会造成浏览器渲染的reflow,懒人总是用懒办法,不是说程序员要越懒越好嘛,还有就是 懒人推动了科技的发展
function setStyle(obj,css){ for(var atr in css) obj.style[atr] = css[atr]; } var head= document.getElementById("head"); setStyle(head,{width:"200px",height:"70px",display:"block"})
Firefox中还可以通过setAttribute来设置style样式
dom.setAttribute("style","width:10px;height:10px;border:solid 1px red;")
一不小心造了个轮子,原来javaScript中有个现成的cssText属性,兼容各个浏览器,语法为:obj.style.cssText="样式";
var head= document.getElementById("head"); head.style.cssText="width:200px;height:70px;display:bolck";
通过js的cssText来批量修改样式目的是尽量避免页面reflow,提高性能