Встроенный стиль, добавленный с помощью jquery, пуст

Question

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

var liList = document.getElementById("reports-list").getElementsByTagName("li");
var listCount = liList.length;

if (listCount == 0) {
    $('#download-reports').css({'display': 'none !important'});
    $('#welcome-left').css({'width': '100% !important'});
} else if (listCount >= 1) {
    $('#download-reports').css({'display': 'block !important'});
    $('#welcome-left').css({'width': '65% !important'});
}

Answer 1

Помните, что атрибут встроенного стиля - это просто атрибут ! И jQuery дает нам метод для изменения атрибутов. Таким образом, вы можете сделать что-то вроде этого.

$('#div').attr('style','display: none !important;');

J S Fiddle DEMO

Однако это не добавит к тому, что уже существует во встроенном стиле, оно полностью заменит его. Если элемент не имеет тега встроенного стиля, он будет создан, но если атрибут встроенного стиля уже существует, он полностью заменит его.

Кроме того - это, вероятно, не лучший способ сделать это. Что вы, вероятно, должны сделать, это включить класс в таблицу стилей CSS, и этот класс имеет желаемые стили. Затем просто добавьте или удалите этот класс!

.master_hidden {
  display: none !important;
}

$('#div').addClass('master_hidden');
$('#div').removeClass('master_hidden');