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

Question

所以这可能是一个奇怪的问题。但我尝试element.style.display = 'none !important'在 Google Chrome 控制台中使用隐藏 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中所示的方式使用。（当/如果OP不接受这个答案时，我会删除这个答案。）

您指定了无效的属性值；可以在样式规则!important中使用，但不能在通过对象分配的特定值中使用。我很惊讶你在该地区看到了。当我这样做时，我不使用 Chrome 或 Firefox（也许是完成后没有看到它工作而留下的？）：styledisplay: nonestyle.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.