编程 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中__proto__与prototype的关系深入理解

Dec 04 Javascript

鼠标滚轮改变图片大小的示例代码

Nov 20 Javascript

JS获取节点的兄弟,父级,子级元素的方法

Jan 09 Javascript

node.js中的fs.readlinkSync方法使用说明

Dec 17 Javascript

以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题

Nov 13 Javascript

IE8 内存泄露(内存一直增长 )的原因及解决办法

Apr 06 Javascript

纯JS实现可用于页码更换的飞页特效示例

May 21 Javascript

jQuery实现动态加载select下拉列表项功能示例

May 31 jQuery

微信小程序实现带缩略图轮播效果

Nov 04 Javascript

vue设计一个倒计时秒杀的组件详解

Apr 06 Javascript

js神秘的电报密码哈弗曼编码实现

Sep 10 Javascript

node.js 微信开发之定时获取access_token

Feb 07 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