Use facts to prove the high performance of cssText in js_javascript skills

||


<script> <br>var container = document.getElementById('container' ); <br>function appendElement(){ <br>var ary = []; <br>container.innerHTML = ''; <br>for(var i=0;i<=1000;i ){ <BR> var div = document.createElement('div'); <BR>ary.push(div); <BR>container.appendChild(div); <BR>} <BR>return ary; <BR>} <BR>function test1(){ <BR>var ary = appendElement(); <BR>var d1 = new Date; <BR>for(var j=0;j<ary.length;j ){ <BR>ary[j]. style.width = '50px'; <BR>ary[j].style.height = '50px'; <BR>ary[j].style.backgroundColor = 'gold'; <BR>} <BR>var d2 = new Date; <BR>console.log('Time consuming:' (d2-d1)); <BR>} <BR>function test2(){ <BR>var ary = appendElement(); <BR>var d1 = new Date; <BR>for(var j=0;j<ary.length;j ){ <BR>var sty = ary[j].style; <BR>sty.cssText = 'width:50px;height:50px ;background-color:red;'; <BR>} <BR>var d2 = new Date; <BR>console.log('Time consuming:' (d2-d1)); <BR>} <BR>< /script> <br></body> <br></html> <br> </div> <br>Test 1 and Test 2 both add 1000 divs to the page. <br><br>Test 1 Use the following three lines of code<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="85661" class="copybut" id="copybut85661" onclick="doCopy('code85661')"><u>Copy the code</u></a></span> The code is as follows:</div> <div class="codebody" id="code85661"> <br>ary[j].style.width = '50px'; <br>ary[j].style.height = '50px'; <br>ary[j].style.backgroundColor = 'gold'; <br> </div> <br>Test 2 Use cssText to do it in one line<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="25182" class="copybut" id="copybut25182" onclick="doCopy('code25182')"><u>Copy the code</u></a></span> The code is as follows:</div> <div class="codebody" id="code25182"> <br>sty .cssText = 'width:50px;height:50px;background-color:red;'; <br> </div> <br> <p>Test 1 and Test 2 both add 1000 divs to the page. </p> <p>Test 1 Use the following three lines of code<br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="6619" class="copybut" id="copybut6619" onclick="doCopy('code6619')"><u>Copy the code</u></a></span> The code is as follows:</div> <div class="codebody" id="code6619"> <br>ary[ j].style.width = '50px';<br>ary[j].style.height = '50px';<br>ary[j].style.backgroundColor = 'gold';<br> </div> <br>Test 2 Use cssText to do it in one line<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="88866" class="copybut" id="copybut88866" onclick="doCopy('code88866')"><u>Copy the code</u></a></span> The code is as follows:</div> <div class="codebody" id="code88866"> <br>sty.cssText = 'width:50px;height:50px;background-color:red;';<br> </div> <br>Test code: <br><div class="htmlarea"> <textarea id="runcode15974"> <p>Click here to test directly: </p> <div> <input onclick="test1()" value="测试1" type="button"> || <input onclick="test2()" value="测试2" type="button"> || <input onclick="stop()" value="停止测试" type="button"> <div id="container"></div> </div> </textarea> <br><input onclick="runEx('runcode15974')" type="button" value="运行代码"><input onclick="doCopy('runcode15974')" type="button" value="复制代码"> <input onclick="doSave(runcode15974)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">[Ctrl A select all Note: </a>If you need to introduce external Js, you need to refresh to execute </div>]<script type="text/javascript">// <![CDATA[ var container = document.getElementById('container'); function appendElement(){ var ary = []; container.innerHTML = ''; for(var i=0;i<=1000;i++){ var div = document.createElement('div'); ary.push(div); container.appendChild(div); } return ary; } function stop(){ container.innerHTML = ''; } function test1(){ var ary = appendElement(); var d1 = new Date; for(var j=0;j<ary.length;j++){ ary[j].style.width = '50px'; ary[j].style.height = '50px'; ary[j].style.backgroundColor = 'gold'; } var d2 = new Date; alert('耗时：' + (d2-d1)); } function test2(){ var ary = appendElement(); var d1 = new Date; for(var j=0;j<ary.length;j++){ var sty = ary[j].style; sty.cssText = 'width:50px;height:50px;background-color:red;'; } var d2 = new Date; alert('耗时：' + (d2-d1)); } // ]]></script>