blocks|key|2554572|text|表单中的控件元素也会成为表单元素的属性。因此，通过使用style作为其id，可以使<form>的style属性引用一个输入。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2554573|如果添加console.log(document.getElementById('f').style)，它将返回<input+id="style">，而不是元素的预期样式规则|2554574|我会将窗体包装在一个容器中，并将内联样式应用于该容器。很少会使用<form>作为块元素|2554575|​|2554576|<div+id="f"+style='display:+none'>
++<form>
++++<input+type='text'+id='style'+/>
++</form>
</div>
<button+onclick='document.getElementById("f").style.display+=+"block"'>Click</button>|code-block|syntax|javascript|2554577|2554578|entityMap^0|R|5|15|6|1C|5|0|4|1B|1K|I|0|W|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|18|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|19|8|@]|D|@]|E|$O|P]]|$1|Q|3|K|5|6|7|1A|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|S|$]]

<p>Control elements inside a form become properties of form element also. So you are making the <code>style</code> property of the <code>&lt;form&gt;</code> reference an input by using <code>style</code> as it's id. </p>

<p>If you add <code>console.log(document.getElementById('f').style)</code> it will return  <code>&lt;input id="style"&gt;</code> instead of the expected style rules of the element</p>

<p>I would wrap the form in a container and apply inline style to that container instead. It's rare that you would use a <code>&lt;form&gt;</code> as a block element</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="f" style='display: none'&gt;
  &lt;form&gt;
    &lt;input type='text' id='style' /&gt;
  &lt;/form&gt;
&lt;/div&gt;
&lt;button onclick='document.getElementById("f").style.display = "block"'&gt;Click&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2343780|text|这是因为通过在子元素中使用'+id+='+style‘，您将创建对该子元素的引用，而不是访问父元素的样式，以便修复您应该为id使用不同的名称。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2343781|示例：https://jsfiddle.net/kwz3v9fx/2/|offset|length|2343782|​|2343783|<form+id='f'+style='display:+none'>
++<input+type='text'+id='anotherName'/>
</form>
++++
<button+onclick='document.getElementById("f").style.display+=+"block"'>Click</button>|code-block|syntax|javascript|2343784|2343785|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/kwz3v9fx/2/^0|0|3|W|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|11|8|@]|9|@]|A|$K|L]]|$1|M|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U]]]]

<p>It's because by using 'id='style' in the child element you are creating a reference to that child instead of accessing the style of the parent, in order to fix that you should use a different name for the id.</p>

<p>Example: <a href="https://jsfiddle.net/kwz3v9fx/2/" rel="nofollow noreferrer">https://jsfiddle.net/kwz3v9fx/2/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id='f' style='display: none'&gt;
  &lt;input type='text' id='anotherName'/&gt;
&lt;/form&gt;
    
&lt;button onclick='document.getElementById("f").style.display = "block"'&gt;Click&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2343842|text|这是因为内联样式(style="display:+none;")优先于内部样式(document.getElementById("f").style.display+=+"block")。要解决此问题，请改用setAttribute：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2343843|​|2343844|<form+id='f'+style='display:+none'>
	<input+type='text'+id='style'/>
</form>

<button+onclick='document.getElementById("f").setAttribute("style",+"display:+block;")'>Click</button>|code-block|syntax|javascript|2343845|2343846|您可以看到这是因为<form>元素在JavaScript中被视为对象，并且当子元素具有name或id属性时，该属性将作为属性添加到form对象。请看下面的代码片段：|2343847|2343848|console.log(document.getElementById("f").style);+
/*This+shows+the+<input>+element+rather+than+the+styles+
applied+to+the+actual+<form>+element*/|2343849|<form+id="f">
++++<input+type="text"+id="style"+/>
</form>|2343850|2343851|entityMap^0|9|M|14|1G|2W|C|0|0|0|0|9|6|17|4|1C|2|1T|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|P|3|G|5|6|7|1G|8|@]|D|@]|E|$]]|$1|Q|3|R|5|J|7|1H|8|@]|D|@]|E|$K|L]]|$1|S|3|T|5|J|7|1I|8|@]|D|@]|E|$K|L]]|$1|U|3|G|5|6|7|1J|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|W|$]]

<p>This is happening because inline style (<code>style="display: none;"</code>) has priority over your internal style (<code>document.getElementById("f").style.display = "block"</code>). To fix this, use <code>setAttribute</code> instead:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id='f' style='display: none'&gt;
	&lt;input type='text' id='style'/&gt;
&lt;/form&gt;

&lt;button onclick='document.getElementById("f").setAttribute("style", "display: block;")'&gt;Click&lt;/button&gt;</code></pre>
</div>
</div>
</p>

<p>You can see why this is because <code>&lt;form&gt;</code> elements are treated as objects in JavaScript, and when the child elements have either a <code>name</code> or <code>id</code> property, that is added as a property to the <code>form</code> object. See the snippet below:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>console.log(document.getElementById("f").style); 
/*This shows the &lt;input&gt; element rather than the styles 
applied to the actual &lt;form&gt; element*/</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="f"&gt;
    &lt;input type="text" id="style" /&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>


<p>Consider the following code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id='f' style='display: none'&gt;
	&lt;input type='text' id='style'/&gt;
&lt;/form&gt;

&lt;button onclick='document.getElementById("f").style.display = "block"'&gt;Click&lt;/button&gt;</code></pre>
</div>
</div>
</p>

<p>After clicking on the button, I would expect the form to become visible, but it doesn't. Why is that?</p>

<p>Note that if one of the following conditions is true it works as expected:</p>

<ul>
<li>input id is not named "style"</li>
<li>another tag such as div is used instead of form</li>
<li>a non form element tag is used instead of input (i.e. tags such as p or div work fine; input, textarea and button don't)</li>
</ul>


If hidden form contains input with id='style', it won't be visible after setting display='block' in javascript

容器

考虑以下代码：​<form id='f' style='display: none'><input type='text' id='style'/></form><button onclick='document.getElementById("f").style.display = "block"'>Click</b...

问如果隐藏表单包含id='style‘的输入，则在javascript中设置display='block’后将不可见
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果隐藏表单包含id='style‘的输入，则在javascript中设置display='block’后将不可见EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果隐藏表单包含id='style‘的输入，则在javascript中设置display='block’后将不可见
EN