在BBC.com网站使用style.display='none'隐藏遮罩元素不生效问题

问题原因 #

这个问题是DOM样式操作的典型误区，核心原因有两点：

• 直接通过element.style.属性名赋值时，不能附带!important标识。!important属于CSS声明的优先级修饰符，不属于属性值的范畴，你传入'none !important'属于非法值，浏览器会自动忽略!important部分，最终生成的内联样式只有display: none，没有优先级标记。
• BBC网站本身的样式规则已经给fc-dialog-overlay、fc-consent-root这类弹窗元素设置了带!important的display属性，按照CSS优先级规则，带!important的外部类选择器样式优先级高于不带!important的内联样式，所以你的修改被官方样式覆盖，元素不会隐藏。

解决方法 #

方法1：用setProperty添加带优先级的样式 #

CSSStyleDeclaration.setProperty()方法支持第三个参数传入优先级标记，生成的内联样式自带!important，优先级最高，可以覆盖所有官方样式：

// 隐藏遮罩层
const overlay = document.querySelector("div.fc-dialog-overlay");
overlay.style.setProperty('display', 'none', 'important');

// 隐藏同意弹窗根元素
const consentRoot = document.querySelector("div.fc-consent-root");
consentRoot.style.setProperty('display', 'none', 'important');

方法2：直接删除元素（更简便） #

如果你不需要后续恢复这些弹窗的显示，直接把元素从DOM树中移除即可，完全不需要考虑样式优先级问题：

document.querySelector("div.fc-dialog-overlay")?.remove();
document.querySelector("div.fc-consent-root")?.remove();

内容的提问来源于stack exchange，提问作者Peter