用 js 的關聯數組控制文字顏色事例分享

初學網頁在給頁面文字中添加樣式時感受比力簡單，可是若是一行中需要添加幾個分歧的樣式，好比最簡單的一行中有幾個分歧文字又該怎么怎么做？一個一個的添加選擇器添加顏色；其實不消，只要用數組就可解決這個問題；

東西/原料

1
起首架構一下網頁的樣式，既然是舉例，那么就簡單寫入四個 span 用來做我們的文字存放，和之后的對比；
2
我們起首用最初的 css 體例來給這些文字添加樣式；
直接用 color 這個屬性就可以節制文字的顏色；
如圖二，就可以看到生效之后的結果；
3
可是若是有良多分歧的，顏色構成還可以這么寫嘛，謎底必定是不可的。那么我們就用 js 來節制。起首寫一個 script 標簽；里面界說一個數組 colors，存放值也就是文字；而下標就可用來暗示顏色；
4
然后我們用一個輪回來將，下標和別離存放到 span 標簽中去；然后就會將三個分歧的 span 寫入頁面；（第四個 span 是距離用的并無什么意義）
5
然后我們對比一下兩個分歧體例的頁面代碼量，咋一看感受并沒什么不同，可是若是，顏色更多那？？？，圖一只需要添加幾個下標和值，可是圖二那？（圖一阿誰 span 并無意義）