Javascript 通过CSS隐藏元素的可能方式有哪些

我试图用CSS隐藏HTML元素

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

---

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

使用

显示：无或<代码>可见性：隐藏
很简单，只需在CSS中将
display
属性设置为
none
：

#tinynav1
{
  display:none
}

当您想显示它时，再次将
显示设置为
块

可见性：隐藏隐藏元素，但它仍会占用布局中的空间

显示：无从文档中完全删除元素。它不占用任何空间，即使源代码中仍然有它的HTML

使用
显示的其他优点：

display:none表示相关元素根本不会出现在页面上（尽管您仍然可以通过DOM与之交互）。在其他元素之间不会为其分配空间。

可见性：隐藏表示与
显示：无
不同，元素不可见，但在页面上为其分配了空间。
如果要隐藏它并折叠它所需的空间，请使用
显示：无
如果要保留空间，请使用
可见性：隐藏

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

CSS:

选择#tinynav1{display:none；}

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

select.tinynav1{display:none；}

作为内联样式，您也可以这样做（您可以尝试使用inspector）：


使用此CSS

.tinynav {
    display: none;
}

或

区别在于前者将使
select
完全不呈现，后者将使
select
呈现（它将占用文档的空间），但它将完全不可见

这里有一把小提琴来显示差异：

您应该注意到第三行文本前有一个空格。它是渲染但不可见的选择。第二行文本前没有空格，因为选择完全没有呈现（它有
display:none
）

还有第三种选择，即

.tinynav {
    opacity: 0;
}

它的行为几乎与
可见性：隐藏
相同，但唯一的区别是使用
不透明度：0
时，您仍然可以单击选择按钮。使用
可见性：隐藏将被禁用。
直接在
上使用
style=“display:none”
，或者创建一个具有该设置的css类，并将该类分配给
您可以根据需要使用
显示：无
或
可见性：隐藏
：

#tinynav{display:none；}

或

#tinynav{可见性：隐藏；}

请参阅下面的URL以更好地了解
显示：无
和
可见性：隐藏

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

-1因为当我在谷歌上搜索“隐藏元素css”时，这是第一个结果：还有一个结果指向stackoverflow，所以这也可以被看作是这一结果的重复。。。。这是难以置信的简单<代码>显示：无
。我不敢相信你还没有试过。如果这里真的有一个更大的问题证明你的“非常顺从”的评论是正确的，那么请提供更多的证据，也许是一个小提琴的例子来证明它，这样我们就可以明白你的意思，因为你问问题的方式，我们所能做的就是建议
显示：无
，这是如此明显，几乎不值得发布。它对我也不起作用。我发现，这是因为我用class=“class1”class=“class2”而不是class=“class1 class2”。我想这对大多数人来说似乎是痛苦的基础，但这正是我错过的。希望这能让某人免于几个小时的挫折。@danrhul
可见性：hidden
还保留了它所占用的空间，并增加了元素不参与事件和选项卡顺序的额外好处
.tinynav {
    visibility: hidden;
}

.tinynav {
    opacity: 0;
}