Могу ли я использовать jquery для удаления/отрицания css! Важного правила?

Если существует правило CSS, в котором используется !important, существует ли способ удалить правило !important, чтобы я мог выполнить дальнейшие изменения стиля нисходящего потока с помощью JS или jQuery?

theirs.css

div.stubborn { display: none !important; }

mine.js

$('.stubborn').fadeIn();  // won't work because of !important flag

К сожалению, у меня нет контроля над стилем, применяющим правило !important, поэтому мне нужен обход.

Ответ 1

К сожалению, вы не можете переопределить !important, не используя !important как встроенный/внутренний стиль под включенным theirs.css.

Вы можете определить стиль !important и добавить его в .stubborn, а затем настроить непрозрачность. См. ниже,

CSS

div.hidden_block_el { 
   display: block !important;
   opacity: 0;
}

JS:

$('.stubborn')
    .addClass('hidden_block_el')
    .animate({opacity: 1});

DEMO: http://jsfiddle.net/jjWJT/1/

Альтернативный подход (встроенный),

$('.stubborn')
    .attr('style', 'display: block !important; opacity: 0;')
    .animate({opacity: 1});

DEMO: http://jsfiddle.net/jjWJT/

Ответ 2

Просто добавьте тег style="" к любым изображениям с этой проблемой, надеюсь, что у всех у них есть какой-то определяющий класс, который легко сделать.

$('div.stubborn').attr('style', 'display: inline !important;');

jsFiddle DEMO

Ответ 3

Вам нужно создать новый класс для применения fade.

CSS

div.stubborn { display: none !important; }
div.stubborn.fade-ready { display: block !important; opacity: 0; }

JS:

$('.stubborn').addClass('fade-ready').animate({opacity: 1}); //to show
$('.stubborn').fadeOut(function() {$(this).removeClass('fade-ready');}); //to hide

DEMO ЗДЕСЬ

Ответ 4

вы можете добавить новый стиль css с добавленным к нему важным, который переопределит оригинальный стиль

Это из другого ответа в javascript:

function addNewStyle(newStyle) {
var styleElement = document.getElementById('styles_js');
if (!styleElement) {
    styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.id = 'styles_js';
    document.getElementsByTagName('head')[0].appendChild(styleElement);
}
styleElement.appendChild(document.createTextNode(newStyle));
}

 addNewStyle('td.EvenRow a {display:inline !important;}')

этот ответ здесь

Также я считаю, что вы можете добавить стиль, подобный этому

        .css({ 'display' : 'block !important' });

в jQuery

Ответ 5

Я попробовал несколько методов, но лучшие результаты, которые я получил, добавив стиль CSS (! important) в отдельный класс, затем удалите с помощью jQuery:

CSS

.important-css-here { display: block !important;}

В jQuery:

$("#selector").addClass("important-css-here");

тогда, когда мне нужно:

$("#selector").removeClass("important-css-here");

работает как шарм; -)