CSS - 与display相反：none

Question

我正在尝试设置两个简单的css类来切换元素：

.hide{
  display:none;
}

.show{
  display:inherit;
}

似乎工作但有时显示：继承;返回麻烦，这与display：none完全相反; ？

Answer 1

这一切都取决于您指定的元素。例如，<div>和<p>元素默认为display:block;，而<span>默认为display:inline;。

接受的答案here根据正在使用的浏览器提供每个元素的默认列表。

修改

display: initial; .show { display: block; display: initial; } 适用于大多数浏览器，appears CSS的后备线可能是最佳做法：

{{1}}

Answer 2

取决于您要为块元素显示的元素：

.show{
  display: block;
}

Answer 3

如果您只是切换元素，则不需要两个类;你只需要为每个元素添加和删除一个类（“隐藏”）。隐藏元素时，向其中添加“hide”类，当再次显示该元素时，删除“hide”类。

然而，如果你真的需要两个课程，我已经取得了类似的成功：

.show{display:"";}

空白值告诉浏览器忽略该属性，并返回其默认值。

Answer 4

如果您使用Javascript执行此操作：

document.getElementById(id).style.display = "";

和

document.getElementById(id).style.display = "none";

可以为您切换显示。