湖南龙网

  1. 首页 > 生活百科 > >

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

小知识

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

用 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中我们如何使用和更改太阳形