编程 Javascript

利用JavaScript的%做隔行换色的实例

Posted in Javascript onNovember 25, 2017

如下所示：

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
 li {
  list-style-type: none;
  width: 300px;
  height: 30px;
 }
</style>
</head>

<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
 var oli=document.getElementsByTagName('li');
 for(var i=0;i<oli.length;i++)
  {
   if(i%2==0)
    {
     oli[i].style.background='#F17B7D';
    }
   else
    {
     oli[i].style.background='#EDB461';
    }
  }
</script>
</body>
</html>

以上这篇利用JavaScript的%做隔行换色的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

脚本收藏iframe

Jul 21 Javascript

jQuery中filter()和find()的区别深入了解

Sep 25 Javascript

ExtJS4 动态生成的grid导出为excel示例

May 02 Javascript

javascript笛卡尔积算法实现方法

Apr 08 Javascript

javascript实现一个简单的弹出窗

Feb 22 Javascript

分享10个优化代码的CSS和JavaScript工具

May 11 Javascript

Angularjs根据json文件动态生成路由状态的实现方法

Apr 17 Javascript

浅谈在Vue-cli里基于axios封装复用请求

Nov 06 Javascript

p5.js入门教程之鼠标交互的示例

Mar 16 Javascript

微信小程序定位当前城市的方法

Jul 19 Javascript

vue里如何主动销毁keep-alive缓存的组件

Mar 21 Javascript

vue引用外部JS的两种种方法

Jan 28 Javascript

zTree节点文字过多的处理方法

Nov 24 #Javascript

JavaScript程序设计高级算法之动态规划实例分析

Nov 24 #Javascript

详解vue-cli脚手架build目录中的dev-server.js配置文件

Nov 24 #Javascript

javaScript和jQuery自动加载简单代码实现方法

Nov 24 #jQuery

Bootstrap modal只加载一次数据的解决办法(推荐)

Nov 24 #Javascript

浅谈vue-cli加载不到dev-server.js的解决办法

Nov 24 #Javascript

浅谈Angular文字折叠展开组件的原理分析

Nov 24 #Javascript

You might like

如何在Laravel之外使用illuminate组件详解

2020/09/20 PHP

获取客户端电脑日期时间js代码(jquery)

2012/09/12 Javascript

Extjs实现进度条的两种便捷方式

2013/09/26 Javascript

关于function类中定义变量this的简单说明

2016/05/28 Javascript

angularjs下拉框空白的解决办法

2017/06/20 Javascript

angular使用bootstrap方法手动启动的实例代码

2017/07/18 Javascript

Vue2.0 组件传值通讯的示例代码

2017/08/01 Javascript

JS实现下拉菜单列表与登录注册弹窗效果

2017/08/10 Javascript

Node.js中sequelize时区的配置方法

2017/12/10 Javascript

nodejs超出最大的调用栈错误问题

2017/12/27 NodeJs

bmob js-sdk 在vue中的使用教程

2018/01/21 Javascript

解决angularjs中同步执行http请求的方法

2018/08/13 Javascript

js实现简单音乐播放器

2020/06/30 Javascript

Python专用方法与迭代机制实例分析

2014/09/15 Python

自己使用总结Python程序代码片段

2015/06/02 Python

Python pass详细介绍及实例代码

2016/11/24 Python

Python利用flask sqlalchemy实现分页效果

2020/08/02 Python

python编写微信远程控制电脑的程序

2018/01/05 Python

python线程池threadpool实现篇

2018/04/27 Python

python使用xlsxwriter实现有向无环图到Excel的转换

2018/12/12 Python

python logging日志模块原理及操作解析

2019/10/12 Python

tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例

2020/01/21 Python

使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果

2020/11/10 HTML / CSS

加拿大便宜的隐形眼镜商店：Clearly

2016/09/15 全球购物

英国最大的笔记本电脑直销专家：Laptops Direct

2019/07/20 全球购物

在职研究生自我鉴定

2013/10/16 职场文书

干部培训自我鉴定

2014/01/22 职场文书

大学生社会实践方案

2014/05/11 职场文书

运动会400米加油稿（8篇）

2014/09/22 职场文书

行政文员岗位职责

2015/02/04 职场文书

工程部主管岗位职责

2015/02/12 职场文书

2015年中职班主任工作总结

2015/05/25 职场文书

你真的了解PHP中的引用符号(&)吗

2021/05/12 PHP

springboot集成flyway自动创表的详细配置

2021/06/26 Java/Android

SpringBoot使用AOP实现统计全局接口访问次数详解

2022/06/16 Java/Android

ubuntu端向日葵键盘输入卡顿问题及解决

2022/12/24 Servers