为什么使用 style.visibility='hidden' 代替 style.display='none'

Question

在为计费和交付地址表单编写一些javascript时，我使用了；

document.getElementById(itm.name + "Hint").style.visibility = 'hidden';

如果字段为空，则成功切换包含该字段提示的元素的可见性。问题是，当提示消失时，它所占据的空间没有！经过一番挠头之后，我看了看我以前写的一些代码，当用户勾选"Deliver to Billing address"时，这些代码隐藏了送货地址的所有字段，我意识到我用了；

document.getElementById(itm.name + "Hint").style.display = 'none';

这是我的大纲显示/隐藏函数，它从keyup事件的输入字段中激发。我使用正则表达式来忽略键入字段中的空白

var notEmpty = /^s*$/;  // Match all whitespace
function isFieldEmpty(itm) {
    if(notEmpty.test(itm.value)) {
        document.getElementById(itm.name + "Hint").style.display = 'inline'; // Hint visible
    } else {
        document.getElementById(itm.name + "Hint").style.display = 'none';  // Hint hidden
    }
}

这是字段&包含字段提示。您可以自己尝试，在提示后键入一些文本，并在名字字段中键入任何字符后立即观察它向上移动到提示占用的空间中。

<input name="firstName" type="text" tabindex="1" value="" onkeyup="isFieldEmpty(this)" />
<span id="firstNameHint" class="hint"><br />Please type a first name</span>

9月14日更新：注意到了否决票，并阅读了问题的副本，请接受我的道歉。当我打字时，前面的问题没有出现在可能的问题列表中，我是在想要切换临时文本显示的背景下创建的，这不在前面的问题中。

Answer 1

有些时候，添加和删除元素可能会干扰布局，可能是在可以使用可见性选项的情况下。如果您不希望在隐藏元素后更改布局，则应使用visibility: hidden;，否则应使用display: none;。

Answer 2

我不确定，但你不能确定标签的值是它的显示：没有，但你可以用隐藏的可见性更改，它可以用来存储你想使用但不想显示的值或结果