如何在同一页面中使用 javascript 更改 <div> 标签的可见性？答案

【问题标题】：How to change the visibility of a <div> tag using javascript in the same page?如何在同一页面中使用 javascript 更改 <div> 标签的可见性？
【发布时间】：2012-12-30 15:17:20
【问题描述】：

我正在编写一个简单的 JavaScript 代码。

根据条件，我应该将标签的可见性从隐藏更改为可见。

我应该单独使用 javascript。没有 jQuery 或 AJAX。请有任何想法或建议。

【问题讨论】：

你可以只使用CSS3，或者使用JavaScript 可以使用jsfiddle.net 放代码并给我们一些链接？

标签： javascript html css css-transitions

【解决方案1】：

使用`visibility` 属性：

用id="yourID"显示div：

document.getElementById("yourID").style.visibility = "visible";

隐藏它：

document.getElementById("main").style.visibility = "hidden";

使用`display` 属性：

显示：

document.getElementById("yourID").style.display= "block";

隐藏：

document.getElementById("yourID").style.display= "none";

【讨论】：

【解决方案2】：

<div id="contentDiv">
    This is the content .
</div>

如果您想使用 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";
}

希望此代码对您有所帮助........

【讨论】：

【解决方案3】：

虽然要求不要用jquery做，但可以做为：$('.my_div_tag_id').css('visibility','hidden');

【讨论】：

【解决方案4】：

可见：

var elem = document.getElementById("IdOfEl");
elem.style.display="block";

隐藏：

var elem = document.getElementById("IdOfEl");
elem.style.display="none";

【讨论】：

这和设置visibility不一样。

【解决方案5】：

当你想显示 div 时调用这个函数。在您的细分/案例中写下这些条件。

function showDiv() {
    document.getElementById('divId').style.display = 'block';   //  or 'inline'
}

让我知道您的反馈。

【讨论】：

【解决方案6】：

一种方法是在 JavaScript 中创建控制逻辑并将其添加到文档的“脚本”标签中。然后应用逻辑来隐藏/显示“div”元素。

我根据第 16 页的“第一个 HTML 文档”（Musciano 和 Kennedy，2002 年）创建了一个示例 HTML 文档。它在靠近顶部的“body”标签内包含一个“div”标签。 ShowAndHide 函数已包含在“head”标签内的“script”标签中。 ShowAndHide 的应用程序可以在靠近末尾的“body”标签内的其他“script”标签中找到。

您可以在 PDF 文档“Show-and-Hide Control Logic: Inspired by a Question at Stack Overflow”的附件中找到 HTML 示例。

参考

Musciano, C. 和 Kennedy, B. (2002)。 HTML 和 XHTML：权威指南，第五版。加利福尼亚州塞巴斯托波尔：O'Reilly Media Inc.

【讨论】：

使用visibility 属性：

使用display 属性：

使用`visibility` 属性：

使用`display` 属性：