前端WebAPI

最新推荐文章于 2024-11-05 15:26:40 发布

Keiven_sun.

最新推荐文章于 2024-11-05 15:26:40 发布

阅读量136

点赞数 1

分类专栏：笔记文章标签： javascript html5 html css css3

本文链接：https://blog.csdn.net/m0_53500687/article/details/116050571

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

##DOM事件控制

提示：作者第一次发文，各位大佬多多包涵

文章目录

前言
一、如何使用DOM记录事件关闭广告？
二、使用步骤
总结

前言

学习记录：如何用DOM事件处理关闭广告

一、如何使用DOM记录事件关闭广告？

使用DOM操作元素三步法

二、使用步骤

1.构建框架和设置样式

<!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>Document</title>
    <style>
        .ad {
            position: relative;
        }
        
        .ad img {
            width: 100%;
        }
        
        .close-btn {
            position: absolute;
            top: 5px;
            right: 5px;
        }
    </style>
</head>

<body>
    <div class="ad">
        <img src="images/luzhou.jpg" alt="">
        <i class="close-btn">
            <img src="images/close.jpg" alt="">
        </i>
    </div>
</body>
</html>

2.响应事件三步法

<script>
        // 1. 获取元素
        var btn = document.querySelector('.close-btn');
        var ad = document.querySelector('.ad');
        // 2. 注册事件 处理事件
        btn.onclick = function() {
            console.log('广告关闭'); // 控制台调试使用
            ad.style.display = 'none';
        }
</script>