Как отменить применение CSS через Javascript или jQuery?

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

Думая об этом по-другому, вы можете попробовать обернуть вызывающий нарушение модальный элемент другим элементом и сделать оборачивающий элемент display:none.

Не имеет значения, какое свойство display у дочернего компонента, если родительский компонент не отображается.

Я считаю, что синтаксис jQuery будет выглядеть примерно так:

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

См. https://api.jquery.com/wrap/

Answer 2

, если вы добавляете! 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 после загрузки скрипта, который вы не можете редактировать.