<!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. CROSS JOIN连接用于生成两张表的笛卡尔集

    将两张表的情况全部列举出来 结果表: 列= 原表列数相加 行= 原表行数相乘     CROSS JOIN连接用于生成两张表的笛卡尔集. 在sql中cross join的使用: 1.返回的记录数为两个 ...

  2. ios 多线程小结----- GCD篇

    //3 GCD(充分利用设备的多盒)-------------屏蔽了线程,只能看见任务 队列步骤两步,定制任务,将任务添加到队列.GCD将添加的任务,放到线程中去执行,自动执行,自动释放原则:先进先出 ...

  3. ［转］c++ vector 遍历方式

    挺有趣的,转来记录 随着C++11标准的出现,C++标准添加了许多有用的特性,C++代码的写法也有比较多的变化.   vector是经常要使用到的std组件,对于vector的遍历,本文罗列了若干种写 ...

  4. markdown思维导图笔记

  5. 学习JNDI

    既然datasource对象有tomcat提供,那么我们如何在应用程序中获得它呢,tomcat把这个对象放在JNDI服务中, 并用一个名字把它关联起来,我们在应用程序中,只需通过JNDI搜索这个名字, ...

  6. 三、jQuery--jQuery基础--jQuery基础课程--第10章 jQuery UI型插件

    1.拖曳插件——draggable 拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格 ...

  7. C#4.0图解教程 - 第24章 反射和特性 - 1.反射

    24.1 元数据和反射 有关程序及类型的数据被成为 元数据.他们保存在程序集中. 程序运行时,可以查看其他程序集或其本身的元数据.一个运行的程序查看本身元数据或其他程序的元数据的行为叫做 反射. 24 ...

  8. EasyUi – 6.easyui常见问题

    1.进度条 2.JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法 3. 三张表的连接查询现在到datagrid里 4.日期组合框DateBox设置readonly ...

  9. AIX性能监控

    http://www.ibm.com/developerworks/cn/aix/library/au-aix7memoryoptimize2/ http://www.aixchina.net/Art ...

  10. 让那些为Webkit优化的网站也能适配IE10（转载）

    转载地址:http://www.w3cplus.com/css3/adapting-your-webkit-optimized-site-for-internet-explorer-10.html 特 ...