标签：document 说明 height 效果 按钮 项目 接下来 doc color
在说今天的知识点之前，先说一下cssText的属性应用，关于cssText是给标签添加行内样式，比如我们要给一个原有的div动态添加了宽高500px；然后又通过cssText给动态添加了一个宽200px，那么最后这个div上的样式就只有最后你添加的这个200px；而宽度就没有了,看代码：
1 window.onload= function(){ 2 var oBox=document.getElementById("box"); 3 oBox.onclick=function(){ 4 oBox.style.cssText="width:500px;height:500px;"//第一次添加的500px的宽高 5 }; 6 oBox.onclick=function(){ 7 oBox.style.cssText="width:200px;"//第二次添加的200px的宽，那么结果是只有一个宽200的div 8 } 9 10 }
从上面的案例就说明了，cssText在标签没有属性值的时候是添加，若是有行内样式的话就相当于是替换的功能。好了，接着我们来看今天的内容for循环动态添加新闻，设定一个ul标签，然后我们通过动态添加li标签以及生成5条新闻，布局很简单直接来看代码：
1 <input id="btn" type="button" value="点击生成5条新闻"> 2 <ul id="list"></ul>
我想要实现的效果是通过点击button来生成5条新闻，那么我们来分析
第一步：就是要有一个5条新闻的数组，然后给ul添加li，接着就把5条新闻循环在li里即可；来看看代码：
1 window.onload= function(){ 2 var Btn=document.getElementById("btn"); 3 var Ul=document.getElementById("list"); //先找到最外面的ul 4 var arr=["新闻1","新闻2","新闻3","新闻4","新闻5"]; 5 var len=arr.length; 6 Btn.onclick=function(){ 7 for(var i=0;i<len;i++){ 8 Ul.innerHTML+="<li>" + arr[i] + "</li>";//这里一定要记得是追加+=内容，若是等于就是相当于直接给li添加最后一个“新闻5”了 9 } 10 } 11 };
这样写完之后，点击按钮会出现5条新闻了，但是有一个问题出现了，那就是一直点击就一直在追加新闻，导致点击一次添加5条，所以我们要解决这个问题，想要点击之后追加5条新闻之后就再次点击不再加新闻，呢么接下来就是
第二步：解决一直点击一直追加新闻这个问题。
解决这个问题有几种方法：
1、是button点击之后就直接禁掉（或者隐藏）；这个不是很友好，用户体验不太好
2、点击完之后就将页面清空，那么第二次进来就相当于重新进来一样；这个性能不好，浏览器一直在清空，生成，清空，生成...
3、就是做判断。
最后一个比较合理，那么我们来做判断，就是先设置一个开关，当点击按钮进来为真的 情况下，我们就让它生成5条新闻，否则就不动态添加。代码如下
1 window.onload= function(){ 2 var Btn=document.getElementById("btn"); 3 var Ul=document.getElementById("list"); //先找到最外面的ul 4 var arr=["新闻1","新闻2","新闻3","新闻4","新闻5"]; 5 var len=arr.length; 6 var onOff=true;//先设置开关为真 7 Btn.onclick=function(){ 8 if(onOff){ 9 for(var i=0;i<len;i++){ 10 Ul.innerHTML+="<li>" + arr[i] + "</li>"; 11 12 } 13 onOff=false;//执行完以上代码之后，我们让它为假，这样下次进来就不执行了 14 } 15 16 } 17 18 19 };
最后这个思路就是直接执行一次，所以性能上会比较好一点，好了，希望我们能够共同进步，在以后的项目中都能灵活运用，以上想法都是可以，从代码最优上来看还是最后一个会有好一点！ok，就这样了，明天继续！加油！
标签：document 说明 height 效果 按钮 项目 接下来 doc color
原文地址：http://www.cnblogs.com/web001/p/7881225.html
