js实现隔行变色事例分享

 时间:2024-10-13 15:41:15

1、如下图,这是小编想要实现的效果,一般来说只要往页面中添加 ul 和 li 之后再用 css 控制样式就行了,但是隔行变色不能用单个 css 控制,如果一个个控制,代码量太多,而且重复的太多,所以这时候用 js 是个非常不错的选择;

js实现隔行变色事例分享

2、看一下小编的页面结构,body 里面只有一个 ul ,用来存放后面放入的 li,由于只有 ul 所以页面中 是看不见的,只能打开控制台 才可看见 ul 存在 ,如图二;

js实现隔行变色事例分享
js实现隔行变色事例分享

3、之后我们开始写 js ,首先 设定变量 oUl 代表 ul ,然后我们用 循环的方式可以想 ul中写入 多个li ;效果如图二;

js实现隔行变色事例分享
js实现隔行变色事例分享

4、然后我们写出控制 隔行变色 的 js ,用 aLis 当数组,存放上面写入的所以 li ,然后使用 循环 加判断的方式实现不同行有不同的背景色;

js实现隔行变色事例分享
js实现隔行变色事例分享

5、然后小编把自己的 代码图贴出来 ,大家可以参考一下,另外在写 js 的时候一定要注意 代码的格式;

js实现隔行变色事例分享
  • Windows11怎么设置状态栏主题色
  • Win11系统怎么开启查找我的设备防丢失
  • 潮汐app怎样使用微信号登录?
  • 如何在chrome浏览器中查看http请求数据
  • WebStorm怎么安装
  • 热门搜索
    小学四年级手抄报大全 好人好事手抄报 成长手抄报内容 历史手抄报内容 安全健康快乐手抄报 关于数学的手抄报内容 小学垃圾分类手抄报 关于手抄报的边框 青春手抄报图片 健康小报手抄报