JavaScript -WebAPI - 属性补充 - 案例 - attributes系列 - 隔行变色

最新推荐文章于 2021-09-06 15:02:53 发布

Henry_ww

最新推荐文章于 2021-09-06 15:02:53 发布

阅读量83

点赞数

分类专栏：案例文章标签： dom js javascript

本文链接：https://blog.csdn.net/Henry_ID/article/details/119532118

版权

案例专栏收录该内容

34 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>属性补充 - attributes系列 - 隔行变色</title>
    </head>
    <body>
        <ul>
            <li>业主小丹1</li>
            <li>业主小丹2</li>
            <li>业主小丹3</li>
            <li>业主小丹4</li>
            <li>业主小丹5</li>
            <li>业主小丹6</li>
            <li>业主小丹7</li>
            <li>业主小丹8</li>
            <li>业主小丹9</li>
            <li>业主小丹10</li>
        </ul>
    </body>
    <script>
        // 需求: 给li增加背景色, 隔行变色(红黄相间)

        // 获取所有li,添加鼠标移入事件
        document.querySelectorAll("li").forEach(function (li, i) {
            // console.log(li, i);

            // 判定奇偶数
            if (i % 2 == 0) {
                // 偶数行
                li.style.backgroundColor = "#6cf";
            } else {
                li.style.backgroundColor = "orange";
            }

            // 需求2: 鼠标移入变色,移出恢复颜色

            // 移入事件
            li.onmouseover = function () {
                // 先保留原来的颜色
                // 自定义属性:存 set
                li.setAttribute("data-default-color", li.style.backgroundColor);
                // 修改颜色
                this.style.backgroundColor = "red";
            };

            // 移出事件
            li.onmouseout = function () {
                li.style.backgroundColor = li.getAttribute("data-default-color");
            };
        });
    </script>
</html>

Henry_ww

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript -WebAPI - 属性补充 - 案例 - attributes系列 - 隔行变色

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt
复制链接

扫一扫