如何创建不创建换行符或水平空间的隐藏 div？答案

【问题标题】：How do you create a hidden div that doesn't create a line break or horizontal space?如何创建不创建换行符或水平空间的隐藏 div？
【发布时间】：2010-12-31 19:36:29
【问题描述】：

我想要一个不占用屏幕空间的隐藏复选框。

如果我有这个：

<div id="divCheckbox" style="visibility: hidden">

我没有看到复选框，但它仍然会创建一个新行。

如果我有这个：

<div id="divCheckbox" style="visibility: hidden; display:inline;">

它不再创建新行，但会占用屏幕上的水平空间。

有没有办法让隐藏的 div 不占用空间（垂直或水平？

【问题讨论】：

这样的div有什么用吗？
@Jonno：在 AJAX 中常用。假设您有一个带有披露三角形的项目列表。您希望在用户单击显示三角形时显示详细信息或子树。所以你要做的就是在细节应该去的地方放一个
。然后，当用户单击三角形时，您将三角形移动到“中间”位置（指向东南）并触发 AJAX 请求以填充
。当 AJAX 请求完成时，将三角形向南并删除“display: none;”来自
的样式。 script.aculo.us 库经常这样做。

标签： html hidden

【解决方案1】：

使用display:none;

<div id="divCheckbox" style="display: none;">

visibility: hidden 隐藏了元素，但仍然占用布局空间。
display: none 将元素从文档中完全删除，不占用任何空间。

【讨论】：

再次显示 div（以防万一有人像我一样需要） - <div id="divCheckbox" style="display: inline-block;">
@anujin：为什么是inline-block？ div 的默认 display 值为 block!
有没有办法反其道而行之？要将 div 从 display: none 更改为 display: inline-block 或等效项，而现在显示的 div 不会占用空间并移动我的其他 DOM 元素？
可能值得更新答案以包含全局 HTML 属性 hidden，该属性自 HTML5.1 以来可用，这与说 display: none 基本相同，尽管直接来自 HTML。但是，display 属性的任何使用都会覆盖hidden 全局属性的行为。

【解决方案2】：

自从HTML5 发布以来，人们现在可以简单地做：

<div hidden>This div is hidden</div>

注意：这不是一些旧浏览器的supported，尤其是IE

隐藏属性文档 (MDN,W3C)

【讨论】：

这在语义上比使用 CSS 隐藏更正确，更便于访问，并且所有主流浏览器都支持。这应该是 2020 年公认的答案。
这与显示相比如何：无，尤其是考虑到淡出动画？

【解决方案3】：

使用style="display: none;"。此外，您可能不需要 DIV，只需在复选框上将样式设置为 display: none 就足够了。

【讨论】：

我需要在页面加载时隐藏我的警报消息，并希望在单击按钮时再次显示它。试过visibility: hidden，但那显示的是空白空间。 style="display: none;" 工作起来有点魅力 :)

【解决方案4】：

由于您应该关注 CSS 中的可用性和通用性，而不是使用 id 来指向特定的布局元素（这会导致巨大或多个 css 文件），因此您可能应该在链接的 .css 文件中使用真正的类：

.hidden {
visibility: hidden;
display: none;
}

或者对于极简主义者：

.hidden {
display: none;
}

现在您可以通过以下方式简单地应用它：

<div class="hidden"> content </div>

【讨论】：

这样的代码看起来干净多了！我更喜欢有一个类而不是内联样式
"可见性：隐藏；"正是我需要的，谢谢！

【解决方案5】：

除了 CMS 的回答之外，您可能还需要考虑将样式放在外部样式表中并将样式分配给 id，如下所示：

#divCheckbox {
display: none;
}

【讨论】：

+1 ，这真是个好建议，但是如何只显示一个复选框而不影响所有其他复选框的可见性？
@dotNetSoldier 老问题，但这里应该有答案。您有一个名为 invis 的 css 类，您可以使用 JS 按 id 从复选框或 div 中添加/删除它。

【解决方案6】：

要防止复选框占用任何空间而不将其从 DOM 中删除，请使用 hidden。

<div hidden id="divCheckbox">

要防止复选框占用任何空间并同时将其从 DOM 中删除，请使用 display: none。

<div id="divCheckbox" style="display:none">

【讨论】：

【解决方案7】：

考虑使用<span> 来隔离要设置样式的标记的小段而不破坏布局。这似乎比试图强制 <div> 不显示自己更惯用——如果实际上复选框本身不能按照您想要的方式设置样式。

【讨论】：

【解决方案8】：

鼠标点击显示/隐藏：

<script language="javascript">

    function toggle() {

        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");

        if (ele.style.display == "block") {

            ele.style.display = "none";
            text.innerHTML = "show";
        }
        else {

            ele.style.display = "block";
            text.innerHTML = "hide";
        }
    }
</script>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here

<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

来源：Here

【讨论】：

【解决方案9】：

要隐藏元素视觉上，但将其保留在 html 中，您可以使用：

<div style='visibility:hidden; overflow:hidden; height:0; width:0;'>
  [content]
</div>

或

<div style='visibility:hidden; overflow:hidden; position:absolute;'>
  [content]
</div>

display:none 可能出了什么问题？它从 html 中完全删除元素，因此如果需要访问隐藏元素中的某些内容，某些功能可能会被破坏。

【讨论】：

【解决方案10】：

display: none;

这应该使元素消失并且不占用任何空间。

【讨论】：

感谢对我的答案格式发表评论的人。