javascript - 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');