for迴圈動態生成一組新聞以及cssText的應用

在說今天的知識點之前，先說一下csstext的屬性應用，關於csstext是給標籤新增行內樣式，比如我們要給乙個原有的div動態新增了寬高500px；然後又通過csstext給動態新增了乙個寬200px，那麼最後這個div上的樣式就只有最後你新增的這個200px；而寬度就沒有了,看**：

1   window.onload= function
();6 obox.onclick=function()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
()10
}11 };

這樣寫完之後，點選按鈕會出現5條新聞了，但是有乙個問題出現了，那就是一直點選就一直在追加新聞，導致點選一次新增5條，所以我們要解決這個問題，想要點選之後追加5條新聞之後就再次點選不再加新聞，呢麼接下來就是

第二步：解決一直點選一直追加新聞這個問題。

解決這個問題有幾種方法：

1、是button點選之後就直接禁掉（或者隱藏）；這個不是很友好，使用者體驗不太好

2、點選完之後就將頁面清空，那麼第二次進來就相當於重新進來一樣；這個效能不好，瀏覽器一直在清空，生成，清空，生成...

3、就是做判斷。

最後乙個比較合理，那麼我們來做判斷，就是先設定乙個開關，當點選按鈕進來為真的情況下，我們就讓它生成5條新聞，否則就不動態新增。**如下

1  window.onload= function
()13 onoff=false;//
執行完以上**之後，我們讓它為假，這樣下次進來就不執行了14}
1516}17
1819 };

最後這個思路就是直接執行一次，所以效能上會比較好一點，好了，希望我們能夠共同進步，在以後的專案中都能靈活運用，以上想法都是可以，從**最優上來看還是最後乙個會有好一點！ok，就這樣了，明天繼續！加油！