Question

我正在开发一个单页的网络应用程序，所以我有很多HTML div，其中包含相关的CSS规则，设置为“display：none;”根据用户的操作，我使用$（'＃some-id'）。css（'display'，'block'）来将显示设置为“none”以外的其他内容。这使div可见，一切都很好。

但它很难看，因为我的JavaScript代码必须知道每个div的“显示”使用什么值。通常，它是“阻止”，“内联”或“网格”。这些信息应该在CSS中，而不是在JavaScript中。

我尝试使用jquery.show（）和jquery.hide（），但是如果它以“none”开头，则总是会将显示设置为“block”。我希望在CSS中有一些方法可以表明div的正确值，因为它不是“无”。但我还没有找到类似的东西。

有更优雅的解决方案吗？

Answer 1

更优雅的解决方案是使用类。

正如您所说，display信息位于您的CSS文件中。最简单，最易读的解决方案是将.hidden类添加到应隐藏的元素中。

在CSS文件中：

.hidden {display: none;}

在jQuery中切换类：

// Equivalent of hide():
$(el).addClass("hidden")

// Equivalent of show():
$(el).removeClass("hidden")

您不必再添加任何内容。没有额外的CSS规则或任何东西。如果您正在使用特定规则，则可能需要添加!important。我认为这是其使用合理的情况之一，即：

.hidden {display: none !important;}

现在，如果所有元素都具有hidden类，则它们将被隐藏，即使它们的选择器更具特异性。

Answer 2

你可以直接使用

$(whatever).css('display', 'what you want');

删除内联样式属性与其他问题类似：Use jQuery to remove an inline style

Answer 3

也许您可以尝试使用css display initial来恢复元素的原始显示（内联或阻止）。

$('#some-id').css('display', 'initial');

Answer 4

$('#element').show();
%('#element').css('display','inline')

或

$('#element').addClass('show');

样式表中的

：

.show{
   display: inline;
}

要么都应该正常工作。我不知道其他任何方式。