Style.display = 'none' 不适用于 BBC.com 覆盖元素 [重复]

Question

所以这可能是一个奇怪的问题。但我试图在我的 Google Chrome 控制台中使用 element.style.display = 'none !important' 隐藏 bbc.com 网站上的某个 HTML 元素。奇怪的是，它并没有像我期望的那样隐藏元素。 也许这是一件小事，我只是在监督一些事情。

这是我使用的代码：

var overlay = document.querySelector("div[class='fc-dialog-overlay']");
overlay.style.display = 'none !important';

我没有收到错误，如果我检查元素，它还包含新属性，看起来像 <div class="fc-dialog-overlay" style="display: none;"></div>，但仍然可以看到。 class='fc-consent-root' 等其他几个元素也会出现同样的问题。

Answer 1

注意：不要做下面setAttribute的事情，使用setProperty，如this answer to the earlier question所示。 （当/如果它不被 OP 接受时，我会删除这个答案。）

---

您指定的属性值无效； !important 可用于样式rules，但不能用于您通过style 对象指定的特定值。我很惊讶您在style 区域看到display: none。当我这样做时，我不使用 Chrome 或 Firefox（也许它是在完成 .display = "none" 之后没有看到它工作的结果？）：

const overlay = document.getElementById("example");
overlay.style.display = "none !important";

<div id="example">x</div>
<div>y</div>

如果我右键单击x 并查看它，它根本没有style，即使在代码运行之后。

您仍然可以这样做，您只需分配给整个 style 属性，以便获得完整的规则解析：

const overlay = document.getElementById("example");
overlay.setAttribute(
    "style",
    overlay.getAttribute("style") + "; display: none !important"
);

#example {
    display: block !important;
}

<div id="example">x</div>
<div>y</div>

请注意，即使我通过样式表应用了冲突的!important 规则，它也可以工作。这是因为样式表!important 规则会覆盖内联样式，除非内联样式也 具有!important。