javascript - 如果隐藏表单包含 ID 为 ='style' 的输入，在 javascript 中设置显示 ='block' 后它将不可见

Question

考虑以下代码:

<form id='f' style='display: none'>
	<input type='text' id='style'/>
</form>

<button onclick='document.getElementById("f").style.display = "block"'>Click</button>

单击按钮后，我希望表单可见，但它没有。这是为什么？

请注意，如果满足以下条件之一，它将按预期工作:

• 输入的id没有命名为“style”
• 使用另一个标签如div代替form
• 使用非表单元素标签代替 input(即 p 或 div 等标签可以正常工作；input、textarea 和 button 则不行)

Answer 1

表单内的控制元素也成为表单元素的属性。所以你正在制作 style <form> 的属性(property)使用 style 引用输入因为它是身份证。

如果添加 console.log(document.getElementById('f').style)它会返回 <input id="style">而不是元素预期的样式规则

我会将表单包装在一个容器中，然后将内联样式应用于该容器。您很少会使用 <form>作为 block 元素

<div id="f" style='display: none'>
  <form>
    <input type='text' id='style' />
  </form>
</div>
<button onclick='document.getElementById("f").style.display = "block"'>Click</button>