十五、奇偶行变色

最新推荐文章于 2023-07-17 17:08:20 发布

一个孤独漫步者的遐想

最新推荐文章于 2023-07-17 17:08:20 发布

阅读量477

点赞数

分类专栏： JavaScript 文章标签： javascript js html css jquery

本文链接：https://blog.csdn.net/weixin_43555997/article/details/116464423

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

基于CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>奇偶变色</title>

    <!-- IMPORT CSS -->
    <style>
        *{
            padding:0;
            margin:0;
        }

        ul{
            list-style:none;
        }

        #newsBox{
            box-sizing: border-box;
            margin:20px auto;
            padding:20px;
            width: 300px;
            border:2px solid lightblue;
        }

        #newsBox li{
            line-height:35px;
            border-bottom: 1px dashed lightcoral;
        }


        /* 去除最后一个LI底边框 */
        #newsBox li:nth-last-child(1){
            border-bottom: none;
        }

        /* 基于CSS实现 */
        /* even：所有的偶数行 */
        #newsBox li:nth-child(even){
            background:lightgray;
        }

         /* 鼠标滑过 */
         #newsBox li:hover{
            background:lightgreen;
        }




    </style>




</head>
<body>
    <ul id="newsBox">
        <li>我是第1个LI</li>
        <li>我是第2个LI</li>
        <li>我是第3个LI</li>
        <li>我是第4个LI</li>
        <li>我是第5个LI</li>
    </ul>

    <!-- IMPORT JS -->
    <script>

        let newsBox=document.getElementById('newsBox');

        //[context].getElementsByTagName([tagname])：在指定的context范围之内，通过标签名获取一组元素（元素集合 HTMLCollection）=>集合和数组很相似，可是以数字索引作为属性名，有length属性存储长度，对不是数组，属于“类数组”
        //在指定盒子下通过标签名来获得都叫那个名字的
        let newSList=newsBox.getElementsByTagName('li');
        console.dir(newSList);


    </script>







</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m99qHQzl-1620309900786)(F:\JavaScript.assets\image-20210505172558656.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-54aXSnEs-1620309900788)(F:\JavaScript.assets\image-20210505172623989.png)]$

基于JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>奇偶变色</title>

    <!-- IMPORT CSS -->
    <style>
        *{
            padding:0;
            margin:0;
        }

        ul{
            list-style:none;
        }

        #newsBox{
            box-sizing: border-box;
            margin:20px auto;
            padding:20px;
            width: 300px;
            border:2px solid lightblue;
        }

        #newsBox li{
            line-height:35px;
            border-bottom: 1px dashed lightcoral;
        }


        /* 去除最后一个LI底边框 */
        #newsBox li:nth-last-child(1){
            border-bottom: none;
        }

        /* 基于CSS实现 */
        /* even：所有的偶数行 */
        /* #newsBox li:nth-child(even){
            background:lightgray;
        } */

         /* 鼠标滑过 */
         /* #newsBox li:hover{
            background:lightgreen;
        } */




    </style>




</head>
<body>
    <ul id="newsBox">
        <li>我是第1个LI</li>
        <li>我是第2个LI</li>
        <li>我是第3个LI</li>
        <li>我是第4个LI</li>
        <li>我是第5个LI</li>
    </ul>

    <!-- IMPORT JS -->
    <script>

        let newsBox=document.getElementById('newsBox');

        //[context].getElementsByTagName([tagname])：在指定的context范围之内，通过标签名获取一组元素（元素集合 HTMLCollection）=>集合和数组很相似，可是以数字索引作为属性名，有length属性存储长度，对不是数组，属于“类数组”
        //在指定盒子下通过标签名来获得都叫那个名字的
        let newSList=newsBox.getElementsByTagName('li');
        console.dir(newSList);


        //1、循环所有或许的LI，判断每一个LI的奇偶行，让其有不同的背景颜色
        for(let i=0;i<newSList.length;i++){
            //一轮 i=0 操作第一个LI newsList[0]
            //二轮 i=1 操作第一个LI newsList[1]

            let curLi=newSList[i];
            //i=0(偶数) 第一个LI    奇数行
            //i=1(奇数) 第二行LI    偶数行
            //=>当前这一行的索引如果是偶数，那么它是奇数行，否则是偶数行
            //偶数判断的标准：能被2整除（除以2的余数为0） n/2除法 n%2除以2取余数
            // if(i%2===0){
            //     //索引是偶数，代表奇数行
            //     curLi.style.background='#fff';

            // }else{
            //     //索引是奇数，代表偶数行
            //     curLi.style.background='#DDD';

            // }

                curLi.style.background=i%2===0?'#fff':'#DDD';


            //2、循环的时候给每一个LI都绑定mouseover/mouseout事件
                curLi.onmouseover=function(){
                    //this:当前操作的这个LI
                    this.style.background='lightblue';

                }

                curLi.onmouseout=function(){
                    this.style.background='#fff';
                }
        }


    </script>



</body>
</html>

一个孤独漫步者的遐想

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
十五、奇偶行变色

基于CSS<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>奇偶变色</title>  <style> *{ padding:0; margin:0; } .
复制链接

扫一扫