DOM实现隔行变色功能

liuguoxuanvip

于 2019-01-22 12:01:51 发布

阅读量342

点赞数

本文链接：https://blog.youkuaiyun.com/liuguoxuanvip/article/details/86592406

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="common.js"></script>
<script>
    window.onload=function () {
        document.getElementById("btn").onclick=function () {
            var list=document.getElementById("uu").getElementsByTagName("li");
            for (i=0;i<list.length;i++){
                //第一种实现方法
/*                if (i%2==0){
                    list[i].style.backgroundColor="red";
                } else{
                    list[i].style.backgroundColor="green";
                }*/
                //第二种实现方法：三元表达式
                list[i].style.backgroundColor=i%2==0?"red":"green";
            }
        }
    }
</script>

<input type="button" value="隔行变色" id="btn"/>
<ul id="uu">
    <li>红旗</li>
    <li>五菱宏光</li>
    <li>奔驰</li>
    <li>兰博基尼</li>
    <li>哈弗</li>
    <li>奥拓</li>
    <li>奥迪</li>
    <li>悍马</li>
</ul>

</body>
</html>