如何创建一个不创建换行符或水平空格的隐藏div？

Question

我希望有一个隐藏的复选框,不占用屏幕上的任何空间.

如果我有这个:

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

我没有看到复选框,但仍然会创建一个新行.

如果我有这个:

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

它不再创建新行,但占用屏幕上的水平空间.

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

Answer 1

使用 display:none;

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

• visibility: hidden 隐藏元素,但它仍占用布局中的空间.

• display: none 从文档中完全删除元素,它不占用任何空间.

Answer 2

自HTML5发布以来,现在可以简单地做到:

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

注意:某些旧浏览器不支持此功能,最明显的是IE <11.

隐藏属性文档(MDN,W3C)

Answer 3

使用style="display: none;".此外,您可能不需要拥有DIV,只需将样式设置display: none为复选框即可.

Answer 4

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

#divCheckbox {
display: none;
}

Answer 5

由于您应该关注CSS中的可用性和通用性,而不是使用id指向特定的布局元素(这会产生大量或多个css文件),您可能应该在链接的.css文件中使用true类:

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

或者极简主义者:

.hidden {
display: none;
}

现在您只需通过以下方式应用它:

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

Answer 6

要仅在视觉上隐藏元素但将其保留在 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 中完全删除该元素，因此如果需要访问隐藏元素内容，某些功能将被破坏。

Answer 7

考虑使用<span>隔离小部分标记进行样式设置而不会破坏布局.这似乎比试图强制<div>不显示自己更具惯用性- 如果实际上复选框本身无法按照您想要的方式设置样式.

Answer 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>

来源：这里

Answer 9

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

<div hidden id="divCheckbox">

为了防止该复选框从占用任何空间，也从DOM，使用移除它display: none。

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