二十六、隔行变色和自定义属性的再一次理解

最新推荐文章于 2024-09-04 20:18:34 发布

一个孤独漫步者的遐想

最新推荐文章于 2024-09-04 20:18:34 发布

阅读量80

点赞数

分类专栏： Java Server Pages

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

版权

JavaScript CSS DOM操作鼠标事件颜色变换

关键词由CSDN通过智能技术生成

Java Server Pages 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

    <style>
        *{
            padding:0;
            margin:0;
        }
        ul{
            list-style: none;
        }
        #box{
            width:500px;
            margin:10px auto;

        }
        #box li{
            line-height:35px;
            border-bottom: 1px dashed #999;
        }



    </style>


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


</ul>

<!--<script src="./js/bian.js"></script>-->
<script>
var box=document.getElementById('box');
var boxList=box.getElementsByTagName('li');


/*
*自定义属性编程思想：
*       前期把一些值存储到元素的自定义属性上，后期需要用到的时候，直接从属性上获取到这些值即可
*
* */



for(var i=0;i<boxList.length;i++){

    var bg=i%2===0?'white':'pink';
    //隔行变色
    boxList[i].style.backgroundColor=bg;

    //设置自定义属性用来存储每一个li的背景
    boxList[i].myOriginBg=bg;

    //鼠标滑过变色
    boxList[i].onmouseover=function(){

    this.style.backgroundColor='lightblue';

    };

    //鼠标移开恢复
    boxList[i].onmouseout=function(){

        this.style.backgroundColor=this.myOriginBg;

    }

}


</script>
</body>
</html>

在这里插入图片描述

一个孤独漫步者的遐想

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二十六、隔行变色和自定义属性的再一次理解

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>隔行变色</title> <style> *{ padding:0; margin:0; } ul{ list-style: none;
复制链接

扫一扫

专栏目录