用jquery添加的内联样式为空答案

【问题标题】：The inlined style added with jquery is empty用jquery添加的内联样式为空
【发布时间】：2019-04-11 10:54:48
【问题描述】：

我计算列出的项目并根据项目的数量添加内联样式。但是，内联样式显示为空。

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

【问题讨论】：

我们需要更多上下文来了解何时运行此逻辑，尤其是在页面上创建元素的时间。
您可以在您的逻辑中console.log($('#download-reports').length) 并在逻辑运行时验证它是否正在查找元素。
实际上您的问题很可能是您尝试使用!important inline。据我所知，jQuery 不会让你这样做。你需要删除那些
你使用.css()而不是.hide()和.show()有什么原因吗？
else if (listCount >= 1) 没有意义。只需使用else，因为这是唯一的另一种可能性。

标签： javascript jquery html css styles

【解决方案1】：

请记住，内联样式属性就是这样，一个属性！ jQuery 为我们提供了一种更改属性的方法。所以你可以做这样的事情。

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

JS Fiddle DEMO

但是，这不会添加到内联样式中已经存在的内容，它将完全替换它。如果元素没有内联样式标签，这将创建它，但如果内联样式属性已经存在，这将完全替换它。

另外 - 这可能不是最好的方法。您可能应该做的是在您的 css 样式表中包含一个类，并且该类具有您想要的样式。然后只需添加或删除该类！

.master_hidden {
  display: none !important;
}

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

【讨论】：