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

如果我有这个:

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

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

如果我有这个:

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

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

是否有一种方法可以让一个隐藏的div不占用任何空间(垂直或水平)?


当前回答

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

#divCheckbox {
display: none;
}

其他回答

使用显示:没有;

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

可视性:hidden隐藏了元素,但它仍然占用布局中的空间。 Display: none将元素完全从文档中移除,它不占用任何空间。

使用style="display: none;"。此外,您可能不需要DIV,只需设置要显示的样式:复选框上没有样式可能就足够了。

通过鼠标点击显示/隐藏:

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

来源:这里

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

#divCheckbox {
display: none;
}

为了防止复选框占用任何空间而不将其从DOM中删除,请使用hidden属性。

<div hidden id="divCheckbox">

为了防止复选框占用任何空间并将其从DOM中移除,请使用display: none。

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