日期:2014-05-16  浏览次数:20386 次

js批量设置style属性
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,提高性能