如何在同一页面中使用 javascript 更改 <div> 标签的可见性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14356124/
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
How to change the visibility of a <div> tag using javascript in the same page?
提问by arunpandiyarajhen
I'm working on a simple javascript code.
我正在编写一个简单的 javascript 代码。
Based on the condition I should change the visibility of the tag from hidden to visible.
根据条件，我应该将标签的可见性从隐藏更改为可见。
I should use javascript alone. No jQuery or AJAX. Any idea or suggestion please.
我应该单独使用javascript。没有 jQuery 或 AJAX。请有任何想法或建议。
回答by mornaner
Using the visibilityattribute:
使用visibility属性：
Show the div with id="yourID":
显示 div id="yourID"：
document.getElementById("yourID").style.visibility = "visible";
To hide it:
隐藏它：
document.getElementById("main").style.visibility = "hidden";
Using the displayattribute:
使用display属性：
Show:
展示：
document.getElementById("yourID").style.display= "block";
Hide:
隐藏：
document.getElementById("yourID").style.display= "none";
回答by Hitesh Bavaliya
<div id="contentDiv">
This is the content .
</div>
if you want to change the visibility of div with id="contentDiv" using javascript then you can do with..
如果您想使用 javascript 更改 id="contentDiv" div 的可见性，那么您可以使用..
var eleDiv = document.getElementById("contentDiv");
// based on condition you can change visibility
if(eleDiv.style.display == "block") {
eleDiv.style.display = "none";
}
else {
eleDiv .style.display = "block";
}
Hope this code helps you........
希望这段代码对你有帮助......
回答by uutsav
Though asked not to be done with jquery, but can be done as: $('.my_div_tag_id').css('visibility','hidden');
虽然要求不要用jquery来完成，但可以这样做： $('.my_div_tag_id').css('visibility','hidden');
回答by 2plus
Call this function when you want to show the div. Write that conditions in your segment/case.
当您想显示 div 时调用此函数。在您的段/案例中写下该条件。
function showDiv() {
document.getElementById('divId').style.display = 'block'; // or 'inline'
}
Let me know your feedback.
让我知道您的反馈。
回答by Anton Baksheiev
Visible:
可见的：
var elem = document.getElementById("IdOfEl");
elem.style.display="block";
Hide:
隐藏：
var elem = document.getElementById("IdOfEl");
elem.style.display="none";
回答by John Frederick Chionglo
One way to do this would be to create the control logic in JavaScript and add it in the "script" tag of the document. Then apply the logic to hide/show the "div" element.
一种方法是在 JavaScript 中创建控制逻辑并将其添加到文档的“脚本”标签中。然后应用逻辑来隐藏/显示“div”元素。
I created an example HTML document based on “A First HTML Document” on page 16 (Musciano and Kennedy, 2002). It includes a "div" tag within the "body" tag near the top. The ShowAndHide function has been included in the "script" tag within the "head" tag. An application of the ShowAndHide may be found in the other "script" tag within the "body" tag near the end.
我根据第 16 页上的“第一个 HTML 文档”（Musciano 和 Kennedy，2002）创建了一个示例 HTML 文档。它在靠近顶部的“body”标签中包含一个“div”标签。ShowAndHide 函数已包含在“head”标签内的“script”标签中。ShowAndHide 的应用程序可以在靠近末尾的“body”标签内的另一个“script”标签中找到。
You can find the HTML example as an attachment to the PDF document "Show-and-Hide Control Logic: Inspired by a Question at Stack Overflow".
您可以在 PDF 文档“ Show-and-Hide Control Logic: Inspired by a Question at Stack Overflow”中找到 HTML 示例。
Reference
参考
Musciano, C. and Kennedy, B. (2002). HTML and XHTML: The Definitive Guide, Fifth Edition. Sebastopol, CA: O'Reilly Media Inc.
Musciano, C. 和 Kennedy, B. (2002)。HTML 和 XHTML：权威指南，第五版。加利福尼亚州塞瓦斯托波尔：O'Reilly Media Inc.
