zoukankan      html  css  js  c++  java
  • JavaScript关于DOM操作的一些小问题(1)

    题目:实现页面中表格的隔行变色

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        </style>
    </head>
    <body>
        <ul id="box">
            <li>奇数行</li>
            <li>偶数行</li>
            <li>奇数行</li>
            <li>偶数行</li>
            <li>奇数行</li>
            <li>偶数行</li>
        </ul>
        <input type="button" id="even" value="偶数变色">
        <input type="button" id="odd" value="奇数变色">
    </body>
    <script>
        //获取按钮
        var oEven = document.getElementById("even");
        var oOdd = document.getElementById("odd");
        //获取box下面的li
        var aLi = document.querySelectorAll("#box li");
        //点击事件
        oEven.onclick = function(){
            for(var i=0;i<aLi.length;i++)
            {
                if( (i+1) % 2 ==0 ){
                    aLi[i].style.cssText="background:pink;";
                }else{
                    aLi[i].style.background = "green";
                }
            }
        }
        oOdd.onclick = function(){
            for(var i=0;i<aLi.length;i++)
            {
                if( (i+1) % 2 !=0 ){
                    aLi[i].style.background = "blue";
                }else{
                    aLi[i].style.background = "orange";
                }
            }
        }
    </script>
    </html>
  • 相关阅读:
    VueBlog
    java 代理模式
    集合框架
    面试题
    java 多线程
    网络编程
    HTTP
    MAVEN
    Redis高级
    深入浅出--梯度下降法及其实现
  • 原文地址:https://www.cnblogs.com/Huskie-/p/12886554.html
Copyright © 2011-2022 走看看