javascript - 通过 CSS 隐藏元素的可能方法是什么

Question

我正在尝试使用 CSS 隐藏 HTML 元素。

<select id="tinynav1" class="tinynav tinynav1">

但它非常有弹性，即使使用 Google Inspect 元素我也无法更改样式。

score 41 · Accepted Answer

很简单，只需在 CSS 中设置display属性即可：none

#tinynav1
{
  display:none
}

当您想再次显示它时，将其设置display为block.

visibility: hidden隐藏元素，但它仍然占用布局中的空间。

display: none从文档中完全删除元素。它不占用任何空间，即使它的 HTML 仍在源代码中。

使用的其他优点display：

display:none意味着有问题的元素根本不会出现在页面上（尽管您仍然可以通过 DOM 与它进行交互）。在其他元素之间不会为其分配空间。
visibility:hidden表示与不同display:none，该元素不可见，但在页面上为其分配了空间。

score 6 · Accepted Answer

6

使用display:none;或visibility:hidden;

于 2013-10-16T09:49:05.853 回答

score 1 · Accepted Answer

您可以使用display:noneor visibility:hidden，根据您的要求：

#tinynav{display:none;}

或者

 #tinynav{visibility:hidden;}

请参阅以下 URL 以更好地理解display:none和visibility:hidden。

score 1 · Accepted Answer

CSS：

select#tinynav1  { display: none; }

或者如果应该隐藏多个选择，请使用相应的类：

select.tinynav1  { display: none; }

作为内联样式，您也可以这样做（您可以尝试检查员）：

<select id="tinynav1" style="display: none">

score 0 · Accepted Answer

使用这个 CSS

.tinynav {
    display: none;
}

或者

.tinynav {
    visibility: hidden;
}

不同之处在于前者会使select根本不渲染，后者会使select渲染（它会占用文档的空间）但它将完全不可见；

这是一个显示差异的小提琴：http: //jsfiddle.net/rdGgn/2/
您应该注意到第三行文本之前的空格。它是呈现但不可见的选择。第二行文本之前没有空格，因为选择根本没有呈现（它有display:none）。

还有第三种选择是

.tinynav {
    opacity: 0;
}

它的行为几乎相同，visibility: hidden但唯一的区别是opacity: 0您仍然可以单击选择。随着visibility: hidden它被禁用。

score 0 · Accepted Answer

style="display:none"直接在上使用或<select>创建具有该设置的 css 类并将该类分配给<select>.

score 0 · Accepted Answer

如果你想隐藏它并折叠它需要的空间，display: none;如果你想保留空间，使用visibility: hidden.

<select id="tinynav1" class="tinynav tinynav1">

CSS

.tinynav {
    display: none;
}

7 回答 7