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

VBScript版代码高亮

Jun 26 Javascript

jQuery 如何先创建、再修改、后添加DOM元素

May 20 Javascript

纯js实现重发验证码按钮倒数功能

Apr 21 Javascript

JS自动倒计时30秒后按钮才可用(两种场景)

Aug 31 Javascript

JavaScript中获取Radio被选中的值

Nov 11 Javascript

jQuery Mobile 和 Kendo UI 的比较

May 05 Javascript

浅谈js中StringBuffer类的实现方法及使用

Sep 02 Javascript

解决AngualrJS页面刷新导致异常显示问题

Apr 20 Javascript

vue上传图片组件编写代码

Jul 26 Javascript

Layer弹出层动态获取数据的方法

Aug 20 Javascript

vue项目打包上传github并制作预览链接（pages）

Apr 19 Javascript

node后端服务保活的实现

Nov 10 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