<!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. Java观察者模式（Observer模式）

    Java深入到一定程度,就不可避免的碰到设计模式(design pattern)这一概念,了解设计模式,将使自己对java中的接口或抽象类应用有更深的理解.设计模式在java的中型系统中应用广泛,遵循 ...

  2. SESSION机制

    一:Session与Cookie Session:在服务器端创建并存放在服务器的内存中的,Session的内容存储是键值对的列表,格式:名称 | 类型:长度:值 Session的生命周期:在php.i ...

  3. Avalon学习

    1.认识AvalonAvalon是一个简单易用的迷你的MVVM框架,作者是博客园的司徒正美,去哪儿.搜狐等等都用这个框架.没有任何依赖,兼容性非常好,支持IE6,不到5000行,压缩后不到50KB.官 ...

  4. win10下安装Ubuntu + 修复Ubuntu引导

    如何在已安装 Windows 10 的情况下安装 Linux(Ubuntu 15.04)双系统? - Microsoft Windows - 知乎http://www.zhihu.com/questi ...

  5. 【转载】Python编写简易木马程序

    转载来自: http://drops.wooyun.org/papers/4751?utm_source=tuicool 使用Python编写一个具有键盘记录.截屏以及通信功能的简易木马. 首先准备好 ...

  6. My97DatePicker使用技巧

    My97DatePicker使用是很常用的控件,总结一下常用使用技巧: 1.onpicked是事件,也就选择日期之后触发事件: 2.isShowClear:是否显示清理按钮: 3.maxDate:最大 ...

  7. 无废话ExtJs 入门教程七[登陆窗体Demo：Login]

    无废话ExtJs 入门教程七[登陆窗体Demo:Login] extjs技术交流,欢迎加群(201926085) 在这节我们通过前几节讲的内容做一个登陆页面,把前几节讲的内容贯穿一下. 1.代码如下: ...

  8. 开个坑, 写个阿里云开放储存服务(OSS)的C++版SDK以及客户端

    这应该是继我研究手册QQ协议后的第2个稍微正式一点的网络程序, 不只是Scoket套接字编程, 还涉及到更多的HTTP协议知识! 阿里云开放储存服务OSS官方已经提供了不少SDK, 包括PHP/Pyt ...

  9. 湘潭1247 Pair-Pair(树状数组)

    分析: 给定n个二元组,求选出两个二元组(可以是同一个)组成一序列其LIS为1,2,3,4的方法数. 分别记为s1, s2, s3, s4 s1,s4对应的情形为a >= b >= c & ...

  10. 总结之HashMap

    前言:在上班途中使用博客园的客户端看了看文章,恰好两天之中看了同一个主题关于HashMap的两篇文章: http://www.cnblogs.com/chenssy/p/3521565.html ht ...