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

Expandable "Detail" Table Rows

Aug 29 Javascript

jquery 学习笔记传智博客佟老师附详细注释

Sep 12 Javascript

Jquery刷新页面背景图片随机变换的实现方法

Mar 15 Javascript

JavaScript比较两个对象是否相等的方法

Feb 06 Javascript

JS实现点击复选框将按钮或文本框变为灰色不可用的方法

Aug 11 Javascript

javascript实现Email邮件显示与删除功能

Nov 21 Javascript

javascript实现uploadify上传格式以及个数限制

Nov 23 Javascript

AngularJS ng-controller 指令简单实例

Aug 01 Javascript

Angular.js中$resource高大上的数据交互详解

Jul 30 Javascript

vue实现文章内容过长点击阅读全文功能的实例

Dec 28 Javascript

vue v-model实现自定义样式多选与单选功能

Jul 05 Javascript

Vue源码解析之数据响应系统的使用

Apr 24 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中全局变量global的使用演示代码

2011/05/18 PHP

基于php缓存的详解

2013/05/15 PHP

详解PHP中foreach的用法和实例

2016/10/25 PHP

PHP实现根据数组某个键值大小进行排序的方法

2018/03/13 PHP

解决windows上php xdebug 无法调试的问题

2020/02/19 PHP

图片自动缩小的js代码,用以防止图片撑破页面

2007/03/12 Javascript

js查错流程归纳

2012/05/04 Javascript

JavaScript实现网页图片等比例缩放实现代码及调用方式

2013/02/25 Javascript

html+css+js实现xp window界面及有关功能

2013/03/26 Javascript

jQuery中ajax的使用与缓存问题的解决方法

2013/12/19 Javascript

js日期对象兼容性的处理方法

2014/01/28 Javascript

借助javascript代码判断网页是静态还是伪静态

2014/05/05 Javascript

javascript构造函数以及原型对象的理解

2017/01/13 Javascript

基于vue-cli创建的项目的目录结构及说明介绍

2017/11/23 Javascript

深入浅析Node环境和浏览器的区别

2018/08/14 Javascript

vue请求本地自己编写的json文件的方法

2019/04/25 Javascript

解决layer弹出层自适应页面大小的问题

2019/09/16 Javascript

layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法

2019/09/24 Javascript

HTML+JavaScript实现扫雷小游戏

2019/09/30 Javascript

js实现掷骰子小游戏

2019/10/24 Javascript

python中的__init__ 、__new__、__call__小结

2014/04/25 Python

Python自动连接ssh的方法

2015/03/07 Python

python常规方法实现数组的全排列

2015/03/17 Python

python文字转语音实现过程解析

2019/11/12 Python

python+opencv3生成一个自定义纯色图教程

2020/02/19 Python

html5 拖拽上传图片实例演示

2013/04/01 HTML / CSS

挪威太阳镜和眼镜网上商城：SmartBuyGlasses挪威

2016/08/20 全球购物

extern在函数声明中是什么意思

2014/01/19 面试题

《小白兔和小灰兔》教学反思

2014/02/18 职场文书

英文演讲稿

2014/05/15 职场文书

党支部培养考察意见

2015/06/02 职场文书

公司周年庆寄语

2019/06/21 职场文书

创业计划书之服装

2019/10/07 职场文书

python 经纬度求两点距离、三点面积操作

2021/06/03 Python

vue-cil之axios的二次封装与proxy反向代理使用说明

2022/04/07 Vue.js

win10截图快捷键win+shift+s没有反应无法截图怎么解决?

2022/08/14 数码科技