Question

我在这里查看了一些关于此主题的帖子，但不太适合我的情况。我正在使用 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 的新手，因此非常感谢您的帮助。

Answer 1

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

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

如果您必须坚持使用 getElementsByClassName，那么 spread 应该可以解决问题：

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

Answer 2

试试这个：

var x = 3 //number of div elements to remove
window.onload = function() {
  for (var i = 0; i < x; i++) {
    var elementid = "div" + i.toString(); //ends up as "div1" or "div3"
    var div = document.getElementById(elementid)
    document.body.remove(div);
}

div 需要看起来像这样：

<div id="div1">Content</div>
<div id="div2">Content</div>
<div id="div3">Content</div>

或者，如果您将 JavaScript 代码放入一个在页面完全加载后调用的函数中，您可以直接使用：

var x = 3 //number of div elements to remove
function removeDivs() {
  for (var i = 0; i < x; i++) {
    var elementid = "div" + i.toString(); //ends up as "div1" or "div3"
    var div = document.getElementById(elementid)
    document.body.remove(div);
}

然后使用 removeDivs() 调用该函数。

Answer 3

Tampermonkey 默认在 DOMContentLoaded 事件被调度时运行。 https://www.tampermonkey.net/documentation.php#_run_at 根据您发布的内容，您似乎根本不需要事件侦听器。您的脚本只需要一行。

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

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

3 个答案: