使用css隐藏div容器的最佳方法是什么？

Question

我尝试过使用

#div{
    display: hide;
}

但它不起作用。

Answer 1

尝试display:none

#div{
display:none;
}

Answer 2

使用：

div {
visibility: hidden;
}

这或多或少会使元素不可见，但它仍会占用空间。

或使用：

div {
display: none;
}

这将完全删除元素及其占用页面的空间。

Answer 3

在向其应用css属性时检查选择器。

  

如果您的'div'是标签名称，如

<div>Your content </div>

您需要使用

div {  // just the tag name
  display : none;
}

  

否则，

如果它是html元素的id，如

<p id="div">Your content</p>

//or

<div id="div"><Your content</div>

你应该使用

#div { //'id' with '#' before
  display : none;
}

Answer 4

简单'display：none'是最简单的方法。 如果要动态显示和隐藏，可以设置隐藏类并像jquery一样使用它：

HTML

<div id="mydiv" class="hidden"></div>

CSS

.hidden
{
    display: none;
}

的jQuery

 $(function () {
     $('#mydiv').removeClass('hidden');
 });

Answer 5

@CMadi是对的，但这样做的好方法是创建以下css类：

.hidden {
    display:none;
}

现在你可以通过将它应用于所述div来重复使用你想要隐藏的div。

<div id="myDivId" class="hidden"></div>

如果你想通过以下方式使用javaScript动态地使它不可见，这也很棒。

var element = document.getElementById("myDivId");
element.classList.add("hidden");

如果您使用jQuery，则可以使用以下代码行隐藏元素。

$("#myDivId").addClass("hide");

使用以下内容再次显示它：

$("#myDivId").removeClass("hide");