一般情况下使用JavaScript控制CSS样式的时候，都习惯性一行一行地写，习惯性忽略了效率问题。今天群里有人提起了cssText，测试了一下，原来这个属性是IE only的，不过很多浏览器也都默认了这个属性，在FF和chrome下页能很好的实现。关于reflow这里还有一篇不错的文章：http://varnow.org/?p=232
示例代码：
<div></div>
<script type=”text/javascript”>
document.getElementsByTagName(“div”)[0].style.cssText=”width:100px; height:200px; border:#ff0000 1px solid;”;
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>cssText测试</title></head>
<body><div></div><script type="text/javascript">document.getElementsByTagName("div")[0].style.cssText="width:100px; height:200px; border:#ff0000 1px solid;";</script></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">div,p{border:#999999 1px solid; padding:10px; background:#CCCCCC; position:absolute;}</style><title>cssText测试</title></head>
<body><div>在后面跟随<img src="http://www.google.com.hk/intl/zh-CN/images/toolbar_animation_20090618.png" width="268" height="262" alt="logo" /></div><h2>cssText测试</h2><ul> <li>L1</li> <li>L2</li> <li>L3</li></ul><ul> <li>L1</li> <li>L2</li> <li>L3</li></ul><p>在前面带路<img src="http://www.google.com.hk/intl/zh-CN/images/toolbar_animation_20090618.png" width="268" height="262" alt="logo" /></p><script type="text/javascript">var d=document.getElementsByTagName("div")[0];var p=document.getElementsByTagName("p")[0];var pos=null;function getMousePosition(e){ var posx=0,posy=0; if(!e){var e=window.event;} if(e.pageX||e.pageY){posx=e.pageX;posy=e.pageY;} else if(e.clientX||e.clientY){ posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } return{'x':posx,'y':posy};}
function run1(){ p.style.left=pos.x-70+"px"; p.style.top=pos.y-70+"px"; }
function run2(){ d.style.cssText="left:"+(pos.x+20)+"px; top:"+(pos.y+20)+"px;";}document.onmousemove=function(e){ pos=getMousePosition(e); run2(); run1();}</script></body></html>
回复 (0)