我想有一个隐藏的复选框,不占用屏幕上的任何空间。
如果我有这个:
<div id="divCheckbox" style="visibility: hidden">
我没有看到复选框,但它仍然创建了一个新行。
如果我有这个:
<div id="divCheckbox" style="visibility: hidden; display:inline;">
它不再创建新的行,但它会占用屏幕上的水平空间。
是否有一种方法可以让一个隐藏的div不占用任何空间(垂直或水平)?
我想有一个隐藏的复选框,不占用屏幕上的任何空间。
如果我有这个:
<div id="divCheckbox" style="visibility: hidden">
我没有看到复选框,但它仍然创建了一个新行。
如果我有这个:
<div id="divCheckbox" style="visibility: hidden; display:inline;">
它不再创建新的行,但它会占用屏幕上的水平空间。
是否有一种方法可以让一个隐藏的div不占用任何空间(垂直或水平)?
当前回答
使用style="display: none;"。此外,您可能不需要DIV,只需设置要显示的样式:复选框上没有样式可能就足够了。
其他回答
显示:没有;
这将使元素消失,不占用任何空间。
为了防止复选框占用任何空间而不将其从DOM中删除,请使用hidden属性。
<div hidden id="divCheckbox">
为了防止复选框占用任何空间并将其从DOM中移除,请使用display: none。
<div id="divCheckbox" style="display:none">
自HTML5发布以来,人们现在可以简单地做:
<div hidden>This div is hidden</div>
注意:一些旧的浏览器不支持这个功能,尤其是IE < 11。
隐藏属性文档(MDN,W3C)
通过鼠标点击显示/隐藏:
<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>
来源:这里
使用style="display: none;"。此外,您可能不需要DIV,只需设置要显示的样式:复选框上没有样式可能就足够了。