如何覆蓋通過 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/