编程 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 相关文章推荐

jQuery+css实现图片滚动效果(附源码)

Mar 18 Javascript

JavaScript实现的石头剪刀布游戏源码分享

Aug 22 Javascript

gridview生成时如何去掉style属性中的border-collapse

Sep 30 Javascript

js表单中选择框值的获取及表单的序列化

Dec 17 Javascript

JavaScript代码实现左右上下自动晃动自动移动

Apr 08 Javascript

JavaScript sort数组排序方法和自我实现排序方法小结

Jun 06 Javascript

Javascript 跨域知识详细介绍

Oct 30 Javascript

node.js的事件机制

Feb 08 Javascript

jquery实现静态搜索功能(可输入搜索文字)

Mar 28 jQuery

Vue 进阶教程之v-model详解

May 06 Javascript

vue-prop父组件向子组件进行传值的方法

Mar 01 Javascript

AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案

Aug 13 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

ThinkPHP控制器间实现相互调用的方法

2014/10/31 PHP

php实现xml转换数组的方法示例

2017/02/03 PHP

php利用嵌套数组拼接与解析json的方法

2017/02/07 PHP

PHP简单实现正则匹配省市区的方法

2018/04/13 PHP

爱恋千雪-US-AscII加密解密工具（网页加密）下载

2007/06/06 Javascript

JavaScript中Object和Function的关系小结

2009/09/26 Javascript

判断ie的两种简单方法

2013/08/12 Javascript

jquery mobile事件多次绑定示例代码

2013/09/13 Javascript

浅谈jQuery中对象遍历.eq().first().last().slice()方法

2014/11/26 Javascript

JS实现仿新浪微博发布内容为空时提示功能代码

2015/08/19 Javascript

基于Turn.js 实现翻书效果实例解析

2016/06/20 Javascript

利用js判断手机是否安装某个app的多种方案

2017/02/13 Javascript

Three.js获取鼠标点击的三维坐标示例代码

2017/03/24 Javascript

js中json对象和字符串的理解及相互转化操作实现方法

2017/09/22 Javascript

Vue 实现树形视图数据功能

2018/05/07 Javascript

vue-router命名视图的使用讲解

2019/01/19 Javascript

详解vue更改头像功能实现

2019/04/28 Javascript

使用vscode快速建立vue模板过程详解

2019/10/10 Javascript

[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5

2018/06/06 DOTA

Python程序设计入门(1)基本语法简介

2014/06/13 Python

Python中使用PyHook监听鼠标和键盘事件实例

2014/07/18 Python

Python 自动补全(vim)

2014/11/30 Python

python单例模式实例分析

2015/04/08 Python

Scrapy爬虫实例讲解_校花网

2017/10/23 Python

python判断设备是否联网的方法

2018/06/29 Python

python爬虫获取小区经纬度以及结构化地址

2018/12/30 Python

解决django后台样式丢失,css资源加载失败的问题

2019/06/11 Python

对Python 中矩阵或者数组相减的法则详解

2019/08/26 Python

使用CSS3实现多列布局与多背景的技巧

2016/02/29 HTML / CSS

护理专业毕业生推荐信

2013/10/31 职场文书

给护士表扬信

2014/01/19 职场文书

销售员工作检讨书（推荐篇）

2014/10/18 职场文书

2014年办公室文秘工作总结

2014/12/09 职场文书

2015年卫生局工作总结

2015/07/24 职场文书

python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)

2021/05/17 Python

Java实现HTML转为Word的示例代码

2022/06/28 Java/Android