用 js 的关联数组控制文字颜色事例分享

         初学网页在给页面文字中添加样式时感受比力简单，可是若是一行中需要添加几个分歧的样式，好比最简单的一行中有几个分歧文字又该怎么怎么做？一个一个的添加选择器添加颜色；其实不消，只要用数组就可解决这个问题；

东西/原料

• 电脑
• Sublime text 2

方式/步调

1. 1

   起首架构一下网页的样式，既然是举例，那么就简单写入四个 span  用来做我们的文字存放，和之后的对比；

   
2. 2

   我们起首用最初的 css 体例来给这些文字添加样式；

   直接用  color  这个属性就可以节制文字的颜色；

   如图二，就可以看到生效之后的结果；

   
3. 3

   可是若是有良多分歧的，颜色构成还可以这么写嘛，谜底必定是不可的。那么我们就用 js 来节制。起首写一个 script 标签；里面 界说一个 数组 colors，存放 值  也就是  文字；而 下标 就可用来暗示 颜色；

   
4. 4

   然后我们用一个轮回来将，下标 和 别离存放到 span 标签中去；然后就会将三个分歧的 span 写入页面；（第四个 span 是距离用的 并无什么意义）

   
5. 5

   然后我们对比一下两个分歧体例的页面代码量，咋一看 感受并没什么不同，可是若是，颜色更多那？？？，图一只需要添加几个 下标 和值 ，可是图二那？（图一阿谁 span 并无意义）

   

注重事项

• 仅作分享；