利用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的%做隔行换色的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
Jun 26 Javascript
JQuery开发的数独游戏代码
Oct 29 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 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
PHP常用的缓存技术汇总
2014/05/05 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
php 数据结构之链表队列
2017/10/17 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
js 函数调用模式小结
2011/12/26 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
浅谈js闭包理解
2019/03/28 Javascript
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
建筑人员岗位职责
2013/12/25 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
军训考核自我鉴定
2014/02/13 职场文书
学生自我评语大全
2014/04/18 职场文书
环保建议书500字
2014/05/14 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
美容院合作经营协议书
2014/10/10 职场文书
工商局调档介绍信
2015/10/22 职场文书
高中政治教学反思
2016/02/23 职场文书