如何给若干个div隔行命名class，如第一个div，class=“left”，第二个div的class=“right”，第三个div的class=“left”

javascriptjquerydiv隔行命名class的值

解决方案 »

  1.   


        function test() {
            var l = document.getElementById("main").getElementsByTagName("div");
          for(var i in l)l[i].style['background-color'] = i%2?"red":"blue";
        }
      

  2.   

    用jquer的odd和even选择器可以了啊
      

  3.   

    <html>
     <style type="text/css">
          .left
            {
               
                 border-left:3px solid  #0000ff        }.right
            {
               
                 border-right:3px solid #ff0000 
            }
        </style>
    <head><script type="text/javascript">
        function test() {
            var x = document.getElementById("main");
            var z = x.getElementsByTagName("div");
            var i;
            var j;
            j = 1;
            for (i = 0; i < z.length; i++) {
                if (j == 1){
                    //z[i].style.backgroundColor = "red";
     z[i].className = "left";
    }
                else{
                    //z[i].style.backgroundColor = "blue";
     z[i].className = "right";
    }
                j = j * -1;
            }    }
    </script>
    </head>
    <body onload="test()" >
    <div id="main">
    <div>This is A</div>
    <div>This is B</div>
    <div>This is C</div>
    <div>This is D</div>
    </div>
    </body></html>
      

  4.   

    在线演示.
    代码演示：<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    <body>
    <div id="main">
        <div>111</div>
        <div>222</div>
        <div>333</div>
        <div>444</div>
        <div>555</div>
    </div>
    <script>
        function test() {
            var l = document.getElementById("main").getElementsByTagName("div");
            for(var i in l){
                if(l.hasOwnProperty(i)){
                    l[i].style['backgroundColor'] = i % 2 ? "red" : "blue";
                }
            }
        }
        test();
    </script>
    </body>
    </html>这样写有坑，尤其是has这儿的判断，其实个人推荐直接用for循环<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    <body>
    <div id="main">
        <div>111</div>
        <div>222</div>
        <div>333</div>
        <div>444</div>
        <div>555</div>
    </div>
    <script>
        function test() {
            var l = document.getElementById("main").getElementsByTagName("div");
            /*
            for(var i in l){
                if(l.hasOwnProperty(i)){
                    l[i].style['backgroundColor'] = i % 2 ? "red" : "blue";
                }
            }
            */
            for(var i = 0; i < l.length; i++){
                console.log(l[i]);
                l[i].style['backgroundColor'] = i % 2 ? "red" : "blue";
            }
        }
        test();
    </script>
    </body>
    </html>