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

2022-05-08 小知识

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

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

文章插图

需要这些哦
电脑
Sublime text 2
方式/
1起首架构一下网页的样式，既然是举例，那么就简单写入四个 span 用来做我们的文字存放，和之后的对比；

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

文章插图

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

文章插图

2我们起首用最初的 css 体例来给这些文字添加样式；
直接用 color 这个属性就可以节制文字的颜色；
如图二，就可以看到生效之后的结果；

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

文章插图

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

文章插图

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

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

文章插图

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

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

文章插图

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

文章插图

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

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

文章插图

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

文章插图

注重事项仅作分享；

以上内容就是用 js 的关联数组控制文字颜色事例分享的内容啦，希望对你有所帮助哦！

推荐阅读

上一篇：使用toad导入导出数据的方法

下一篇：WPS中我们如何使用和更改太阳形