时间戳

首页 > 解决方案 > 如何在纯 Javascript 中加载页面后隐藏 div？

javascript - 如何在纯 Javascript 中加载页面后隐藏 div？

问题描述

我在这里查看了一些关于这个主题的帖子，但对我的情况不太适用。我正在使用 Tampermonkey 用户脚本管理器。我想在页面完全加载后隐藏一堆 div。我已经在页面的控制台上测试了下面的代码，它可以工作。

document.getElementsByClassName('promotions-personalized-offers-ui-single-offer')[0].style.display='none';

此警报也适用于 Tampermonkey 用户脚本管理器。

window.addEventListener("load", function(){
    // code goes below
    alert("hello world");
});

但是，以下代码不起作用。在这种情况下，div 或警报都不起作用。

window.addEventListener("load", function(){
    // ....
    document.getElementsByClassName('promotions-personalized-offers-ui-single-offer')[0].style.display='none';
    alert("it's working");
});

顺便说一句，我是 Javascript 的新手，所以非常感谢任何帮助。

标签： javascripthtmltampermonkey

解决方案

您目前只隐藏第一个 ( [0]) div。您需要遍历所有元素以隐藏它们。
我建议使用document.querySelectorAll因为它很容易迭代：

window.addEventListener("load", function(){
    document.querySelectorAll('promotions-personalized-offers-ui-single-offer')
        .forEach(e => (e.style.display = 'none'));
});

如果你必须坚持getElementsByClassName，点差应该可以解决问题：

window.addEventListener("load", function(){
    [...document.getElementsByClassName('promotions-personalized-offers-ui-single-offer')]
        .forEach(e => (e.style.display = 'none'));
});

推荐阅读