最稳妥的广告隐藏方案是切换预定义CSS类.ad-hidden{display:none!important}，通过classList.add()操作外层容器，配合MutationObserver监听异步广告、clearTimeout防内存泄漏，并优先用visibility:hidden保留尺寸以便恢复显示。
用 setTimeout 配合 display: none 是最直接、兼容性最好、也最容易出错的方案。 不需要框架，几行原生 JS 就能跑通，但细节没处理好，广告可能“藏不干净”或“关不掉”。
为什么不能直接写 img.style.display = 'none'？
内联样式优先级太高，后续用 class 控制显隐时会被覆盖；如果广告是第三方脚本动态插入的（比如 Google AdSense），它可能反复重置 style.display，导致隐藏失效。更稳妥的做法是切换预定义 CSS 类：
-
.ad-hidden { display: none !important; }——!important是防第三方脚本内联样式覆盖的关键 - JS 里只做
element.classList.add('ad-hidden')，不碰style - 如果广告容器有多个层级（比如
position: fixed的悬浮广告仍会占位
visibility: hidden 和 display: none 到底该选哪个？
取决于你是否还要恢复显示：
- 用
display: none：元素彻底退出渲染树，offsetHeight为 0，某些动画库或尺寸测量逻辑会报错；适合“一次性关闭”，且无需再显示 - 用
visibility: hidden：保留盒模型尺寸和文档流位置，JS 仍能读宽高、事件监听器也有效（只是不响应）；适合“隐藏后可能点按钮再弹出来”的场景 - 别在 CSS 动画 keyframes 里写
display: none—— CSS 动画不支持display插值，会直接跳变，视觉突兀
如何避免定时器被多次触发或内存泄漏？
页面里多个广告、或用户频繁刷新/前进后退，容易让 setTimeout 积累未清除的引用：
- 给每个定时器存个 ID，比如
const hideTimer = setTimeout(...)，隐藏前先clearTimeout(hideTimer)（尤其在用户手动关闭后） - 如果广告是异步加载的（如通过
<script async></script>注入），别在DOMContentLoaded里就急着找 DOM 元素，改用MutationObserver监听广告容器出现后再设定时器 - 对 iframe 广告（如第三方联盟广告），主站 JS 无法控制其内部 DOM，只能隐藏整个 iframe 容器；若容器带随机 ID，建议用 class 或
data-ad属性定位，别依赖 ID
真正难的不是“怎么藏”，而是“怎么藏得干净又不干扰后续逻辑”——尤其是当广告由外部 SDK 动态注入、还自带内联样式和定时逻辑时，CSS 类 + !important + 容器级隐藏，才是最不容易翻车的组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
