如何使用 JavaScript 使 DIV 可见和不可见？

你能做一些像

function showDiv()
{
[DIV].visible = true;
//or something
}
563288 次浏览
小开

可以使用 visibility或 display，但是必须对 div.style对象而不是 div对象本身应用更改。

var div = document.getElementById('div_id');


// hide
div.style.visibility = 'hidden';
// OR
div.style.display = 'none';


// show
div.style.visibility = 'visible';
// OR
div.style.display = 'block';
小开
最佳答案

如果[ DIV ]是一个元素

[DIV].style.visibility='visible'

或者

[DIV].style.visibility='hidden'
小开

让我们假设您不使用 jQuery 这样的库。

如果您还没有对 DOM 元素的引用，那么使用 var elem = document.getElementById('id');获取一个

然后可以设置该元素的任何 CSS 属性。要显示/隐藏，可以使用两个属性: display和 visibility，它们的效果略有不同:

调整 style.display将看起来好像元素根本不存在(“删除”)。

elem.style.display = 'none'; // hide
elem.style.display = 'block'; // show - use this for block elements (div, p)
elem.style.display = 'inline'; // show - use this for inline elements (span, a)

或者 style.visibility实际上会使 div 仍然存在，但是是“全空”或者“全白”

elem.style.visibility = 'hidden'; // hide, but lets the element keep its size
elem.style.visibility = 'visible';

如果您使用的是 jQuery，那么只要您想要设置 display属性，就可以更轻松地完成:

$(elem).hide();
$(elem).show();

它将自动使用适当的 display值; 您不必关心元素类型(内联或块)。此外，elem不仅可以是 DOM 元素，还可以是选择器，如 #id或 .class或任何其他有效的 CSS3(以及更多!).

小开

您可以使用类似于 visibility的 opacity，但允许平滑转换和控制其他参数，比如 height (为了代码片段的简单性，我将 js 逻辑直接放入 html 中——不要在生产代码中这样做)

.box { width:150px; height: 150px; background: red; transition: 0.5s }


.hide { opacity: 0; height: 10px}
<div id="box" class="box"></div>


<button onclick="box.classList.toggle('hide')">Toggle</button>

小开

可以使用 DOM 函数: setAttribute 和 RemoveAttribute。 在下面的链接中有一个如何使用它们的示例。

SetAttribute 和 RemoveAttribute 函数

快速浏览:

hide:    document.getElementById("myDiv").setAttribute("hidden","");
unhide:  document.getElementById("myDiv").removeAttribute("hidden");
小开

使用 DOM 元素的“隐藏”属性:

function showDiv(isVisible)
{
[DIV].hidden = !isVisible;
}
小开

使用 CSS 使隐形

#div_id {
/*height: 400px;*/
visibility:hidden;
}

使用 Javascript 使可见性

document.getElementById('div_id').style.visibility = 'visible';
小开

ID 是 Div 的名称。请确保在 Div 中有 runat = “ server”。

            document.getElementById('<%= ID.ClientID %>').hidden = false;
         

document.getElementById('<%= ID.ClientID %>').hidden = true;
小开

截至2022年11月，浏览器对 CSS 还原值的支持为94.56% (https://caniuse.com/?search=revert) ，因此如果要隐藏您使用的

elem.style.display = 'none'; // hide

可见度使用

elem.style.display = 'revert'; // show

这个 posolite 不关心元素类型

注意: revert关键字与 revert关键字不同，不应混淆 关键字，该关键字使用在 每个属性的基础上的 CSS 规范。相比之下，用户代理 样式表根据 CSS 选择器设置默认值。

例如，display属性的 初始值是 inline, 而普通的用户代理样式表设置默认的 display值 从 <div>到 block，从 <table>到 table，等等。 回复


提交答案