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

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

东西/原料

1
起首架构一下网页的样式，既然是举例，那么就简单写入四个 span 用来做我们的文字存放，和之后的对比；
2
我们起首用最初的 css 体例来给这些文字添加样式；
直接用 color 这个属性就可以节制文字的颜色；
如图二，就可以看到生效之后的结果；
3
可是若是有良多分歧的，颜色构成还可以这么写嘛，谜底必定是不可的。那么我们就用 js 来节制。起首写一个 script 标签；里面界说一个数组 colors，存放值也就是文字；而下标就可用来暗示颜色；
4
然后我们用一个轮回来将，下标和别离存放到 span 标签中去；然后就会将三个分歧的 span 写入页面；（第四个 span 是距离用的并无什么意义）
5
然后我们对比一下两个分歧体例的页面代码量，咋一看感受并没什么不同，可是若是，颜色更多那？？？，图一只需要添加几个下标和值，可是图二那？（图一阿谁 span 并无意义）