利用JavaScript的%做隔行换色的实例

如下所示：

<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的%做隔行换色的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 原生javascript实现隔行换色

    js让我们一起从基础来学习,我们一点一点的来学习 下边是我写的代码,然后大家看着学习下吧!!! 复制代码 代码如下: <html> <head> <title>js演示</title> </head> <body> <script> document.write('<table border="1" width="100px" align="center"&

  • 实现隔行换色效果的两种方式【实用】

    纯CSS方式实现隔行颜色交替.鼠标经过高亮颜色: <html> <head> <title></title> <style type="text/css"> ul{list-style:none} li:nth-child(odd){background-color:#eee} li:hover{background-color:Yellow} </style> </head> <body>

  • JS实现隔行换色的表格排序

    1.获取元素    2.获取数据   3.绑定数据   4.隔行换色   5.表格排序 <table cellpadding="0" cellspacing="0" id="tab"> <thead> <tr> <th class="cursor">姓名</th> <th class="cursor">年龄</th> <

  • JS与jQuery实现隔行变色的方法

    JS与jQuery实现隔行变色的方法

    本文实例讲述了JS与jQuery实现隔行变色的方法.分享给大家供大家参考,具体如下: 传统的JS方法: <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> windo

  • 利用JavaScript的%做隔行换色的实例

    如下所示: <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>

  • 利用JS动态生成隔行换色HTML表格的两种方法

    用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色 方法一. 代码: <!DOCTYPE html> <html> <head> <title>动态表格</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description"

  • 怎样在html文档里做隔行换色的多行方法

    既然你都知道是隔行换色了,那就隔行换色就是了.方法很多. 最直接的在每一行的<tr>上直接加bgcolor="red". 用css的话就定义行二个颜色的类.在每一行交替使用这个类就是了.如: tr class="trClass1" tr class="trClass2" New Document table{ width:100%; } .t1{ background:#ff6600; color:black; } .t2{ back

  • 基于JavaScript实现表格隔行换色

    表格隔行换色 需求分析 我们商品分类的信息太多,如果每一行都显示同一个颜色的话会让人看的眼花,为了提高用户体验,减少用户看错的情况,需要对表格进行隔行换色 技术分析 table对象 集合 cells[]:返回包含表格中所有单元格的一个数组. rows[]:返回包含表格中所有行的一个数组. tBodies[]:返回包含表格中所有tbody 的一个数组. 步骤分析 确定事件: 文档加载完成 onload 2. 事件要触发函数: init() 3. 函数:操作页面的元素 要操作表格中每一行 动态的修改

  • 使用JQ完成表格隔行换色的简单实例

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色. 2.具体代码实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成表格隔行换色&

  • CSS2实现的隔行换色

    利用了CSS2 的 相邻选择符 IE7以下不支持 隔行换色示例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>

  • jquery实现表格隔行换色效果

    jquery实现表格隔行换色效果

    本文实例讲述了jquery实现表格隔行换色效果的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 1.新建一个web项目,jQuery: 2.在WebContent目录下新建script文件夹,将jquery-1.10.1.js复制到script中: 3.同样,新建TableColor.html: TableColor.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

  • jquery隔行换色效果实现方法

    本文实例讲述了jquery隔行换色效果实现方法.分享给大家供大家参考.具体分析如下: 使用 jquery 来实现隔行换行的效果,简单得就跟吃饭一样.来吧,看看代码到底有多么的简单 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javasc

  • JS+CSS实现Li列表隔行换色效果的方法

    本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

随机推荐