第一周、课时14：js中循环的应用——隔行变色

来源：互联网发布：下载杂志的软件编辑：程序博客网时间：2024/06/10 23:14
js中循环的应用——隔行变色

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>隔行变色</title>    <style type="text/css">    li {        list-style: none;        cursor: pointer;    }    .c1 {        background-color: #0072e3;    }    .c2 {        background-color: #ffdc35;    }    .c3 {        background-color: #000079;    }    </style></head><body>    <ul id="list">        <li>习近平应约同德国总理默克尔通电话</li>        <li>《巡视利剑》第1集：王珉悔了苏树林哭了武长顺白头了</li>        <li>习近平应约同德国总理默克尔通电话</li>        <li>《巡视利剑》第1集：王珉悔了苏树林哭了武长顺白头了</li>        <li>习近平应约同德国总理默克尔通电话</li>        <li>《巡视利剑》第1集：王珉悔了苏树林哭了武长顺白头了</li>        <li>习近平应约同德国总理默克尔通电话</li>        <li>《巡视利剑》第1集：王珉悔了苏树林哭了武长顺白头了</li>        <li>习近平应约同德国总理默克尔通电话</li>        <li>《巡视利剑》第1集：王珉悔了苏树林哭了武长顺白头了</li>        <li>习近平应约同德国总理默克尔通电话</li>        <li>《巡视利剑》第1集：王珉悔了苏树林哭了武长顺白头了</li>    </ul>    <script type="text/javascript">    //原理：操作所有的li，按照奇偶行的规律，改变其class样式的属性值，基数行是c1，偶数行是c2    //通过元素的标签名来获取一组元素    //document.getElementsByTagName("元素的标签名");    //获得整个文档中所有的li，它是一个集合，叫做类数组，并且类数组是对象数据类型。    //获得某一指定的元素：oLis[索引]或.item(索引)    var oList = document.getElementById("list");    var oLis = oList.getElementsByTagName("li");    for (var i = 0; i < oLis.length; i++) {        var oLi = oLis[i]; //每一次循环把对应的li取出来        //oLi.className="c1"; 设置每一个li的class属性为c1        i % 2 === 0 ? (oLi.className = "c1", oLi.abc = "c1") : (oLi.className = "c2", oLi.abc = "c2");        oLi.onmouseover = function() {            this.className = "c3";        }        oLi.onmouseout = function() {            var oldVal = this.abc;            this.className = oldVal;        }    }    </script></body></html>
阅读全文
0 0