如何覆盖通过 Javascript 或 jQuery 应用的 CSS？

Question

一个 JS 文件（我不允许编辑）正在应用内联 CSS display: flex !important到div 。 如何覆盖它以display: none ？

我尝试了以下方法但没有成功：

CSS：

.ui.page.modals.dimmer.transition.visible.active {
    display: none !important;
}

.ui.page.modals.dimmer.transition.visible.active[style] {
    display: none !important;
}

jQuery：

$("div.ui.page.modals.dimmer.transition.visible.active").css("display","none");

Answer 1

如果你添加，important 并且 js 不允许你覆盖它：你可以简单地执行以下步骤。 1.尝试使用js删除属性样式，例如-

$("div.ui.page.modals.dimmer.transition.visible.active").removeAttr('style');

2.删除样式属性后，只需添加 -

$("div.ui.page.modals.dimmer.transition.visible.active").css("display","none");

尝试它一直对我有用。 我希望这能帮到您。

确保在加载您无法编辑的脚本后添加此 js。

Answer 2

以不同的方式考虑这一点，您可以尝试将有问题的模态元素包装在另一个元素中，并使包装元素display:none 。

如果不显示父组件，则子组件的显示属性无关紧要。

我相信 jQuery 语法看起来像这样：

$('div.ui.page.modals.dimmer.transition.visible.active').wrap('<div style="display:none"></div>');

见https://api.jquery.com/wrap/