几种实现隔行换色的写法（1中css其余js）

第一种：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行变色</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            margin:0 auto;
            width:80%;
            height:30px;
            border:1px solid #000;
            cursor: pointer;
        }
        .yellow{
            background-color: yellow;
        }
        .red{
            background-color: red;
        }
        .black{
            background-color: black;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <script>
        var divs = document.getElementsByTagName("div");
        for (var i = 0; i < divs.length; i++) {
            divs[i].index = i;
            if(i%2==0){
                divs[i].className = "red";
            }else{
                divs[i].className = "yellow";
            }
            divs[i].onmouseover = function(){
                this.className = "black";
            }
            divs[i].onmouseout = function(){
                if(this.index%2==0){
                    this.className = "red";
                }else{
                    this.className = "yellow";
                }
            }
        }

    </script>
</body>
</html>

隔行换色01

第二种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行变色03</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            margin:0 auto;
            width:80%;
            height:30px;
            border:1px solid #000;
            cursor: pointer;
        }
        .yellow{
            background-color: yellow;
        }
        .red{
            background-color: red;
        }
        .black{
            background-color: black;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <script>
        var divs = document.getElementsByTagName("div");
        for (var i = 0; i < divs.length; i++) {
            if(i%2==0){
                divs[i].className = "red";
            }else{
                divs[i].className = "yellow";
            }
            divs[i].onmouseover = function(){
                this.style.backgroundColor = "#000";
            }
            divs[i].onmouseout = function(){
                this.removeAttribute("style");
            }
        }
    </script>
</body>
</html>

隔行换色02

第三种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行变色04</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            margin:0 auto;
            width:80%;
            height:30px;
            border:1px solid #000;
            cursor: pointer;
        }
        .yellow{
            background-color: yellow;
        }
        .red{
            background-color: red;
        }
        .black{
            background-color: black;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <script>
        var divs = document.getElementsByTagName("div");
        for (var i = 0; i < divs.length; i++) {
            divs[i].index = i;
            if(i%2==0){
                divs[i].className = "red";
            }else{
                divs[i].className = "yellow";
            }
            divs[i].addEventListener("mouseover",over,false); //这个特色就是事件监听机制
            divs[i].addEventListener("mouseout",out,false);
            function over(){
                this.className = "black";
            }
            function out(){
                if(this.index%2==0){
                    this.className = "red";
                }else{
                    this.className = "yellow";
                }
            }
        }
    </script>
</body>
</html>

隔行换色03

第四种：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行变色05</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            margin:0 auto;
            width:80%;
            height:30px;
            border:1px solid #000;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <script>
        var divs = document.getElementsByTagName("div");
        var oldColor;
        for (var i = 0; i < divs.length; i++) {
            if(i%2==0){
                divs[i].style.backgroundColor = "red";
            }else{
                divs[i].style.backgroundColor = "yellow";
            }
            divs[i].onmouseover = function(){
                oldColor = this.style.backgroundColor;  //这里的这个中间变量是这个方法的亮点
                this.style.backgroundColor = "#000";
            }
            divs[i].onmouseout = function(){
                this.style.backgroundColor = oldColor;
            }
        }
    </script>
</body>
</html>

隔行换色04

第五种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行变色02</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            margin:0 auto;
            width:80%;
            height:30px;
            border:1px solid #000;
            cursor: pointer;
        }
        .yellow{
            background-color: yellow;
        }
        .red{
            background-color: red;
        }
        div:hover{
            background-color: black;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <script>
        //其实要是想用伪类的话，可以单纯用html和css就能做出隔行变色的效果
        var divs = document.getElementsByTagName("div");
        for (var i = 0; i < divs.length; i++) {
            if(i%2==0){
                divs[i].className = "red";
            }else{
                divs[i].className = "yellow";
            }
        }

    </script>
</body>
</html>

隔行换色05

时间： 2024-10-01 04:26:45

几种实现隔行换色的写法（1中css其余js）的相关文章

封装一个简单的隔行换色

代码运行效果:笔者接触JS时间不长,对于传参和封装函数理解不够透彻,经过多次练习稍有感悟,为了加深理解写了这篇简单的隔行换色,希望能对刚接触JS的朋友有所帮助,以下是程序代码:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:

这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格隔行换色</title> <script type="text/javascr

网页设计制作CSS实现隔行换色两种方法

网页设计制作CSS实现隔行换色两种方法 2007-12-21 20:59:44 来源:网页教学网网页设计制作,CSS实现隔行换色两种方法: 第一种方法: 以下为引用的内容:<style type="text/css">UL.myul1 LI{}</style><ul class="myul1"><li id="li1">111</li><li id="li2"

三种php表格隔行换色

第一种for{}eles{}: <?php echo "<table width='80%' border = 1 cellpadding=5 cellspacing=0>"; for ($i = 1; $i <= 5; $i++){ if($i % 2 == 0){ echo '<tr align="center" bgcolor="red">'; }else{ echo '<tr align=&quo

2、开关灯-选项卡-隔行换色

一. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> html,body{ margin: 0; padding: 0; width: 100%; height: 100%; cursor: pointer; } </style> </hea

php29号小结（隔行换色······）

1.给表单加样式,可以用css.php与js.js这三种,其中最好用php与js,现在很推广用这种. css3样式隔行换色(table中) ? 1 tr:nth-child(even){ <br> background: #cad9ea; <br> } php与js隔行换色(table中) ? 1 2 3 function changeColor(){ <br> var trs = document.getEle

实现table、列表隔行换色

为了增强用户体验,快速识别行内容,一般都会在一些列表或者表格设置隔行换色~ 本人了解到的有两种常用的方法~ 1,利用CSS进行隔行换色 tr{ background: #E0F0FA;} tr:nth-child(2n){ background: white;} //规定属于其父元素的第2n(第偶数个)个子元素的每个 tr 的背景色 tr{ background-color: expression((this.sectionRowIndex % 2 == 0) ? "#E0F0FA"

表格隔行换色及删除后仍隔行换色效果（好别扭的标题。。。）

表格隔行换色,有多种写法,可以通过jquery来写,也可以用css3实现. 1.jquery方法 odd,奇数:even,偶数方法很简单 $("tr:odd").css({background:"#c66",color:"#fff"}); $('tr:even').css({background:"#fff",color:"#333"}); 但是如果删除后,两个一样背景的tr会挨上,怎么解决呢?可以将换行

c#dev gridview 设置隔行换色等

1:禁止gridview编辑 2:隔行换色介绍一些常用的gridcontrol设置. 1.设置隔行变色.首先设置显示隔行变色,步骤:OptionsView-->EnableAppearanceEvenRow-->true和OptionsView-->EnableAppearanceOddRow-->true;然后设置奇数行和偶数行样式颜色等:Appearance-->EvenRow和Appearance-->OddRow.设计完成后,设计器出现隔行变色效果,如图: 2