利用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 相关文章推荐
JavaScript入门学习书籍推荐
Jun 12 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
js实现整体缩放页面适配移动端
Mar 31 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 Javascript
Javascript中的解构赋值语法详解
Apr 02 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数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
python list的index()和find()的实现
2020/11/16 Python
什么是反射
2012/03/17 面试题
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
安全月活动总结
2014/05/05 职场文书
优秀班主任材料
2014/12/16 职场文书
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS