利用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 相关文章推荐
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
js运动应用实例解析
Dec 28 Javascript
JS实现图片上传预览功能
Nov 21 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
原生js实现弹窗消息动画
Nov 20 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验证复选框有效性的示例
2013/11/13 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
php简单获取复选框值的方法
2016/05/11 PHP
php格式文件打开的四种方法
2018/02/24 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
深入理解vue Render函数
2017/07/19 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
Pycharm github配置实现过程图解
2020/10/13 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
大学生自我鉴定评语
2014/01/27 职场文书
网络管理员岗位职责
2014/03/17 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
党小组考察意见
2015/06/02 职场文书
基石观后感
2015/06/12 职场文书
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js