JS-访问节点及操作节点属性-关闭二维码案例

本文链接：https://blog.csdn.net/weixin_45080761/article/details/111086885

关闭二维码案例

实现思路

获取元素对象（document.querySelector(“元素对象”)）
访问元素对象的父节点（element.parentNode）
操作父节点的节点属性（element.style.属性名=‘属性值’）
利用display样式属性，控制显示与隐藏

HTML 与 CSS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关闭二维码</title>
    <!-- CSS样式 -->
    <style>
        /* 公共样式开始 */
        * {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
        }

        /* 公共样式结束 */
        
        /* 内容样式开始 */
        /* div 盒子样式  */
        .qr-box {
            margin: 10px auto;
            padding: 10px;
            width: 160px;
            border: 1px solid #cccccc;
            position: relative;
        }

        /* 第一个a标签中p标签样式 */
        .qr-box a p {
            width: 160px;
            height: 30px;
            text-align: center;
            color: #ef4f2b;
            font-size: 20px;
        }

        /* 第二个a标签，关闭按钮样式 */
        .close-qr-btn {
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            position: absolute;
            left: -22px;
            top: -1px;
            color: #cccccc;
            border: 1px solid #cccccc;
        }

        /* 内容样式结束 */
    </style>
</head>

<body>
    <!-- 搭HTML框架，div内包含两个a标签 -->
    <div class="qr-box">
        <!-- 第一个a标签内包含文字和图片 -->
        <a href="#">
            <p>去领红包</p>
            <img src="img/tb-QRcode.png" alt="">
        </a>
        <!-- 第二个a标签用作关闭按钮，href="javascript:;" 表示不跳转 -->
        <a href="javascript:;" class="close-qr-btn">X</a>
    </div>

</body>

</html>

Javascript 脚本

// 通过querySelector获取关闭按钮
var closeQrBtn = document.querySelector(".close-qr-btn");
// 控制台输出关闭按钮对象，用于验证是否获取成功
console.log(closeQrBtn);

// 给关闭按钮对象绑定点击事件
closeQrBtn.onclick = function () {

    // 控制台输出关闭按钮对象的父节点，用于验证是否获取成功
    console.log(this.parentNode);
    
    // 设置关闭按钮父节点div元素的节点属性，让其隐藏
    this.parentNode.style.display = 'none';
}