尝试使用 tempermonkey 用户脚本隐藏元素

Question

目标

我正在尝试使用 Temper Monkey 用户脚本隐藏元素

测试网页是

https://www.dmla5.com/play/8733-1-5.html

。

点击

粉色按钮后，将加载视频。

我的目标是隐藏视频下方的

进度条。

---

总结目标的简化版本

document.getElementsByClassName("leleplayer-bar")[0].hidden = true; 代码

该元素是在单击按钮后加载的，因此我必须添加延迟。

目前，它可以直接粘贴到 Google Chrome 开发控制台中，但不能作为用户脚本使用，请查看我的代码

// ==UserScript==
// @name         Hide leleplayer-bar
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Hides elements with class leleplayer-bar
// @author       Your name
// @match        */*/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    function hideElement() {
        var elementsToHide = document.getElementsByClassName("leleplayer-bar");
        if (elementsToHide.length != 0) {
            var elementToHide = elementsToHide[0];
            console.log("Target element found. Hiding...");
            elementToHide.hidden = true;
            console.log("Element hidden successfully.");
            return 1;
            console.log("Observation stopped.");
        } else {
            console.log("Target element not found.");
        }
        return 0;
    }

    function observeDOM() {
        var targetNode = document.body;
        var config = { childList: true, subtree: true };

        var observer = new MutationObserver(function(mutationsList, observer) {
            for (var mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    if (hideElement() === 1) {
                        observer.disconnect();
                        return;
                    }
                }
            }
        });

        observer.observe(targetNode, config);
    }

    setTimeout(function() {
        if (hideElement() === 0) {
            observeDOM();
        }
    }, 1000);
})();

Answer 1

CSS

display:block

（或除 

none

 之外的大多数其他值）会覆盖元素的 

.hidden

 属性

例如

document.querySelectorAll('div').forEach(div => div.hidden = true);

#one {
  display:block;
}

<div id="one">CSS makes this not hidden</div>
<div id="two">This is hidden</div>

你应该使用

document.getElementsByClassName("leleplayer-bar")[0].style.display = "none"; 相反