讨厌的 HTML 布局：如何在保留布局的同时隐藏元素？答案

【问题标题】：pesky HTML layout: how do I hide an element while preserving the layout?讨厌的 HTML 布局：如何在保留布局的同时隐藏元素？
【发布时间】：2010-10-15 07:09:59
【问题描述】：

我想隐藏一个表单输入字段。但是调用 setVisible('inputID', false) 会导致我的液体布局崩溃。我不想那样。

这里有一些简单的解决方法吗？我想过尝试将输入字段的前景色、背景色和边框色渲染为全白。但这变得不必要地复杂了。

【问题讨论】：

标签： html css

【解决方案1】：

使用css隐藏元素有两种方式：

将display属性设置为none
将visibility 属性设置为hidden

第一个选项从流中移除元素，而第二个选项隐藏元素但仍然让它占用流中的空间。

您正在使用第一个选项，而您想使用第二个选项。

例子：

document.getElementById('inputID').style.visiblity = 'hidden';

【讨论】：

【解决方案2】：

如果您将元素的“可见性”样式设置为“隐藏”，它将隐藏该元素，但不会影响其他元素的布局。

【讨论】：

【解决方案3】：

没有看到你的代码很难给出更好的建议，但你可以做一些事情：

鉴于您使用的是 JavaScript，您可以获取要删除的表单输入的宽度和高度，使用这些尺寸创建一个新 div，将其注入表单元素之后，然后隐藏表单元素.有点小技巧，但它有效。
在你的 HTML 中用 div 包围你的输入，并在你的 CSS 中给它一个明确的宽度和/或高度。然后使用 JavaScript 删除输入，就像你已经在做的那样。

【讨论】：

【解决方案4】：

这是relative positioning元素的定义。

只要给它相对定位和远离屏幕的坐标。

例如

position:relative
left:-2000px

它应该将元素移出屏幕，但在它本来应该存在的地方留下一个“洞”。

【讨论】：