利用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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
ext 代码生成器
Aug 07 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
layui使用表格渲染获取行数据的例子
Sep 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
php中session与cookie的比较
2015/01/27 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
extjs 为某个事件设置拦截器
2010/01/15 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
python基础教程之类class定义使用方法
2014/02/20 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
Django学习之文件上传与下载
2019/10/06 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
J2EE面试题大全
2016/08/06 面试题
初中语文教学反思
2014/02/02 职场文书
股份合作协议书
2014/04/12 职场文书
施工工地安全标语
2014/06/07 职场文书
课外访万家心得体会
2014/09/03 职场文书
一年级下册数学教学反思
2016/02/16 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python