<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script>

        window.onload=function ()

        {

            var aLi=document.getElementsByTagName('li');

            for(var i=0;i<aLi.length;i++)

            {

                //i 0 1 2 3 4 5 6....

                if(i%2==0)

                {

                    //0 2 4 6 8 10

                    aLi[i].style.background='#CCC';

                }

                else

                {

                    //1 3 5 7 9

                    aLi[i].style.background='';

                }

            }

        };

    </script>

</head>

<body>

<ul>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

</body>

</html>

JavaScript实现li隔行变色的更多相关文章

  1. 关于table的td和ul元素li隔行变色的功能实现

    table元素的td和ul元素li隔行变色的功能实现 利用css控制二者的样式轻松实现隔行换色: 例如:table的css样式控制: table tr td{   background-color:颜 ...

  2. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

  3. Javascript操作表格隔行变色

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. JavaScript实例---表格隔行变色以及移入鼠标高亮

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  5. jQuery选择器实现隔行变色和使用javaScript实现隔行变色

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...

  6. JavaScript for循环实现表格隔行变色

    本代码主要演示的是for循环, <!doctype html> <html lang="en"> <head> <meta charset ...

  7. javascript小实例，实现99乘法表及隔行变色

    人生短暂,废话不多说,直奔主题! 这个小实例的要求: 实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开 ...

  8. 简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  9. 隔行变色---简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

随机推荐

  1. Android WebView 拦截自定义协议

    URL 语法 URL由三部分组成:资源类型.存放资源的主机域名.资源文件名. URL的一般语法格式为: (带方括号[]的为可选项): protocol :// hostname[:port] / pa ...

  2. kvm 下运行的　WINWS7磁盘空间不足　增加磁盘　实战(这个有问题，还未解决)

    创建一个新硬盘: [root@NB vhost]# qemu-img create -f qcow2 add_win_desk.img 5G Formatting encryption=off clu ...

  3. PHP实现执行定时任务的几种思路详解

    转:https://segmentfault.com/a/1190000002955509 PHP本身是没有定时功能的,PHP也不能多线程.PHP的定时任务功能必须通过和其他工具结合才能实现,例如Wo ...

  4. PHP中比较两个时间的大小与日期的差值

    在这里我们全用到时间戳 mktime(hour,minute,second,month,day,year,[is_dst])     其参数可以从右向左省略,任何省略的参数都会被设置成本地日期和时间的 ...

  5. JavaWeb学习之什么JSP、JSP是如何工作的、JSP语言（各种指令和九大内置对象）、EL表达式简单使用（5）

    1.什么JSP * servlet:java编写的处理动态web的技术 * 特点:Java代码中嵌套html代码 * jsp * 特点:HTMl代码中嵌套java代码 * %tomcat%/conf/ ...

  6. 谈谈Delphi中的类和对象1---介绍几个概念 && 对象是一个地地道道的指针

    参考:http://blog.163.com/liang_liu99/blog/static/88415216200952123412180/ 以下的介绍主要针对的是Delphi的面向对象的知识,可能 ...

  7. 6-04使用SQL语句更新数据

    修改数据语法: UPDATTE 表名 SET 列名 =更新值 WHERE 更新条件 1:省略WHERE条件的更新: 更新性别: UPDATE  UserInfo SET Gender=1 三行受影响. ...

  8. Session 类

     Session 类 Session 类可以使用户在浏览您的网站时,维持他们的状态并跟踪他们的行为. Session 类将每个用户的 session 信息序列化(serialize)后存储到到 coo ...

  9. WPF中查看PDF文件

    需要打开PDF文件时,我们第一印象就是使用Adobe Reader.在开发中,经常会遇到需要展示PDF文件的需求.我们会借助于Adobe Reader的Active控件来实现.不过这需要客户的机器上安 ...

  10. hdu 4293 2012成都赛区网络赛 dp ****

    题意:有n个人,可任意分成若干组,然后每个人个各提供一个信息,表示他们组前面有多少人,后面有多少人.问最多有多少个信息是不冲突的. 将n个人看成一组区间,然后每个人的信息可以表示为该人所在组的区间,然 ...