在 Javascript 中隐藏和显示文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16636594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide and Show TextBox in Javascript
提问by Raj K
I am trying to hide and show box using following code. This work but box is displayed by default. Can I hide the box and only display on click? Currently onclick works to hide the box.
我正在尝试使用以下代码隐藏和显示框。默认情况下显示此工作但框。我可以隐藏框并仅在单击时显示吗？目前 onclick 可以隐藏该框。
<script type="text/javascript">
function display(id) {
var obj = document.getElementById(id)
if (obj.style.display == "none") {
obj.style.display = "block"
}
else {
obj.style.display = "none"
}
return false
}
</script>
<form>
<input type="button" value="Customize" onclick="display('box1_<?=$pd_id?>')">
<input type="submit">
</form>
回答by Dory Zidon
1) Sure just add a style or css class to the object.
1）当然只是向对象添加样式或css类。
<input type="button" style="display:none" value="Customize" onclick="display()">
2) Just exact the element from the event:
2）从事件中精确获取元素：
function display(evnt) {
var obj = evnt.target;
obj.style.display = (obj.style.display === 'none') ? 'block' : 'none'; // (cond) ? <do> : <else>
}
jsFiddle example working example (ignore the getDocument line and of course once it hidden you can't see it anymore..;)
jsFiddle 示例工作示例（忽略 getDocument 行，当然，一旦它隐藏起来，您就再也看不到它了……；）
回答by Hosea Kambonde
addthe following either in the stylesheet or inline styling
在样式表或内联样式中添加以下内容
style="display: none;"
回答by soxfmr
Of course, you can use object.style.visibility="hidden"to do that.
当然，您可以使用它object.style.visibility="hidden"来做到这一点。
回答by David says reinstate Monica
It is, of course, possible to do this without JavaScript (albeit the HTML becomes a little more complex, and relies upon support for the :checkedpseudo-selector. Given the HTML:
当然，不用 JavaScript 也可以做到这一点（尽管 HTML 变得有点复杂，并且依赖于对:checked伪选择器的支持。鉴于 HTML：
<form>
<label class="button" for="customize">Customize</label>
<input type="checkbox" id="customize" />
<input id="submit" />
</form>
And the CSS:
和 CSS：
label.button {
padding: 0.2em 0.4em;
-webkit-appearance: button;
}
#customize {
display: none;
}
#customize + #submit {
display: none;
}
#customize:checked + #submit {
display: inline-block;
}
References:
参考：
回答by ntstha
You can use CSS, and add: <div id="your_box" style="display:none;"></div>initially it will be hidden and onclick()change the attribute to display:block
您可以使用 CSS，并添加：<div id="your_box" style="display:none;"></div>最初它将被隐藏并将onclick()属性更改为display:block
回答by Rahul11
You can keep the box hidden with 'visibility: hidden' or 'display: none'and then onclik change the property to visibility = 'visible';
您可以将框隐藏，'visibility: hidden' or 'display: none'然后 onclik 将属性更改为visibility = 'visible';
