如果隐藏表单包含id ='style'的输入,则在javascript中设置display ='block'后将无法显示

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (139)

请帮忙看看以下代码:

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

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

点击按钮后,我希望表单可见,但事实并非如此。这是为什么?

请注意,如果满足下列条件之一,则它按预期工作:

  • 输入ID未命名为“样式”
  • 使用另一个标记如div而不是表单
  • 使用非表单元素标记而不是输入(例如p或div之类的标签工作正常;输入,textarea和按钮不工作)
提问于
用户回答回答于

表单内的控件元素也成为表单元素的属性。因此,您通过使用id作为id 来style使<form>引用的属性成为输入style

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

我将表单包装在一个容器中,并将内联样式应用于该容器。您很少使用a <form>作为块元素

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

这是因为通过在子元素中使用'id ='style'来创建对该子元素的引用而不是访问父元素的样式,为了解决这个问题,您应该为id使用不同的名称。

示例:

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

扫码关注云+社区

领取腾讯云代金券