DOM案例之隐藏盒子

最新推荐文章于 2023-04-03 20:29:10 发布

原创最新推荐文章于 2023-04-03 20:29:10 发布 · 417 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dom

DOM案例专栏收录该内容

9 篇文章

订阅专栏

本文探讨了如何使用DOM（Document Object Model）来隐藏和显示网页中的元素，重点讲解了相关JavaScript操作，通过实例展示了如何改变元素的display属性以实现元素的隐藏与显示效果，帮助读者掌握DOM操作的基本技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求内容：

//需求：点击案例，隐藏盒子。
//思路：点击a链接，让top-banner这个盒子隐藏起来（加隐藏类名）。
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序

主要知识点：

var topBanner = document.getElementById("topBanner");
//topBanner.className += " hide"; //保留原类名，添加新类名
//topBanner.className = "hide";//替换旧类名
topBanner.style.display = "none";//直接修改属性

示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .top-banner {
            background-color: pink;
            height: 80px;
        }
        .w {
            width: 1210px;
            margin: 10px auto;
            position: relative;
        }
        img {
            width: 1210px;
            height: 80px;
            background-color: blue;
        }
        a {
            position: absolute;
            top: 5px;
            right: 5px;
            color: #fff;
            background-color: #000;
            text-decoration: none;
            width: 20px;
            height: 20px;
            font: 700 14px/20px "simsum";
            text-align: center;
        }
        .hide {
            display: none!important;
        }
    </style>
    <!--<script>-->
        <!--window.onload = function () {-->
            <!-- -->
        <!--}-->
    <!--</script>-->
</head>
<body>
    <div class="top-banner" id="topBanner">
        <div class="w">
            <img src="" alt=""/>
            <a href="#" id="closeBanner">×</a>
        </div>
    </div>


<script>
    //1.获取事件源和相关元素
    var closeBanner = document.getElementById("closeBanner");
    var topBanner = document.getElementById("topBanner");
    //2.绑定事件
    closeBanner.onclick = function () {
        //3.书写事件驱动程序
//        console.log(1);
        //类控制
//        topBanner.className += " hide"; //保留原类名，添加新类名
        topBanner.className = "hide";//替换旧类名
//        topBanner.style.display = "none";
    }

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