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

javascript 进阶篇3 Ajax 、JSON、 Prototype介绍

Mar 14 Javascript

js+html5获取用户地理位置信息并在Google地图上显示的方法

Jun 05 Javascript

JavaScript操作XML文件之XML读取方法

Jun 09 Javascript

基于jQuery实现简单的折叠菜单效果

Nov 23 Javascript

jquery插件uploadify实现带进度条的文件批量上传

Dec 13 Javascript

JS常见问题之为什么点击弹出的i总是最后一个

Jan 05 Javascript

基于jQuery实现弹出可关闭遮罩提示框实例代码

Jul 18 Javascript

bootstrap IE8 兼容性处理

Mar 22 Javascript

JavaScript选取(picking)和反选(rejecting)对象的属性方法

Aug 16 Javascript

JS实现的tab页切换效果完整示例

Dec 18 Javascript

js实现移动端tab切换时下划线滑动效果

Sep 08 Javascript

在vue中使用console.log无效的解决

Aug 09 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面向对象全攻略（六）__set() __get() __isset() __unset()的用法

2009/09/30 PHP

php HtmlReplace输入过滤安全函数

2010/07/03 PHP

基于PHP文件操作的详解

2013/06/05 PHP

PHP的HTTP客户端Guzzle简单使用方法分析

2019/10/30 PHP

Locate a File Using a File Open Dialog Box

2007/06/18 Javascript

myEvent.js javascript跨浏览器事件框架

2011/10/24 Javascript

js动态创建表格,删除行列的小例子

2013/07/20 Javascript

纯js实现仿QQ邮箱弹出确认框

2015/04/29 Javascript

基于js实现投票的实例代码

2015/08/04 Javascript

js基于cookie方式记住返回页面用法示例

2016/05/27 Javascript

jQuery基本过滤选择器用法示例

2016/09/09 Javascript

node.js文件上传处理示例

2016/10/27 Javascript

JS中位置与大小的获取方法

2016/11/22 Javascript

AngularJS指令中的绑定策略实例分析

2016/12/14 Javascript

Node.js中的http请求客户端示例(request client)

2017/05/04 Javascript

详解如何在项目中使用jest测试react native组件

2018/02/09 Javascript

vue项目中vue-i18n和element-ui国际化开发实现过程

2018/04/25 Javascript

微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解

2019/05/14 Javascript

JavaScript实现简单计算器

2020/03/19 Javascript

js中调用微信的扫描二维码功能的实现代码

2020/04/11 Javascript

jQuery实现移动端图片上传预览组件的方法分析

2020/05/01 jQuery

Python遍历zip文件输出名称时出现乱码问题的解决方法

2015/04/08 Python

通过5个知识点轻松搞定Python的作用域

2016/09/09 Python

python检查URL是否正常访问的小技巧

2017/02/25 Python

简述：我为什么选择Python而不是Matlab和R语言

2017/11/14 Python

django celery redis使用具体实践

2019/04/08 Python

Kmeans均值聚类算法原理以及Python如何实现

2020/09/26 Python

利用Python发送邮件或发带附件的邮件

2020/11/12 Python

OnePlus加拿大官网：中国国际化手机品牌

2020/10/13 全球购物

教师旷工检讨书

2014/01/18 职场文书

幼儿园教育教学反思

2014/01/31 职场文书

法定代表人授权委托书

2014/04/04 职场文书

客户经理竞聘演讲稿

2014/05/15 职场文书

在职党员进社区活动总结

2014/07/05 职场文书

最美家庭活动方案

2014/08/31 职场文书

2015元旦晚会主持人开场白+结束语

2014/12/14 职场文书