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

Question

你能否做类似于以下的操作：

function showDiv()
{
    [DIV].visible = true;
    //or something
}

- user1163722

---

为什么不直接使用jQuery的.hide()方法呢？ - rockstardev

不需要jQuery库的话，.hide()方法并不会设置元素的可见性（visibility），而是会设置它的显示方式（display）。有些人会在每个JavaScript问题中推广jQuery库，但只有当你已经在使用jQuery时才需要考虑这种方法。 - user1106925

你显然没有理解“jQuery非常优秀且功能强大”的意思。 - Pekka

像这样的问题，一个好的回答应该包含一个普通的 JS 解决方案和一个展示使用库的优点的解决方案 - 在这种情况下，使用 display 显示元素时不必处理 内联 vs 块级 样式。 - ThiefMaster

Answer 1

如果[DIV]是一个元素，那么

[DIV].style.visibility='visible'

或

[DIV].style.visibility='hidden' 

- ron tornambe

---

"visibility" 的副作用是元素占据的空间仍然保留。这可能符合或不符合 OP 的要求。 - Pekka

在 [DIV] 的位置，我应该输入我的 div 的名称，对吗？ - user1163722

不要使用[DIV]，而应该使用document.getElementById('id-of-the-div')。 - ThiefMaster

@JackStone：这取决于你所说的 div 的“名称”是什么意思。如果它是引用该 div 的变量，那么是的。 - user1106925

那么如果我的div的名称是testdiv，那么它就应该是document.getElementById('testdiv').style.visibility = 'hidden';？ - user1163722

@user1163722: 使用"block" - undefined

Answer 2

假设您不使用像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会让

仍然存在，但是变成了"全部为空"或"全白"

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(以及更多!)。

- ThiefMaster

---

我倾向于您的答案，但我想您需要进行一点更正，您应使用elem.style.display='none'。 - Saumil

有时候，将空字符串分配给显示元素是可以接受的。 - Basilevs

在可见性方面，何时会使用“hidden”而不是“none”？ - Timo

当您想隐藏元素但仍保留其在布局中的位置（即它仍将使用空间，就像它是可见的）时。 - ThiefMaster

你可以使用.style.display=null代替.style.display="block"或"inline"等。当你使用null时，根据元素类型分配默认值。 - Murdej Ukrutný

Answer 3

你可以使用 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';

- zellio

---

标签的值不正确。现在它们可以正常工作了，我不会再去调整它们，因为这太简单了。 - zellio

Answer 4

你可以使用DOM函数：setAttribute和removeAttribute。在下面的链接中，你可以看到如何使用它们的示例。

setAttribute和removeAttribute函数

一个快速查看：

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

- jarh1992

Answer 5

截至2022年11月，CSS revert值的浏览器支持率为94.56%（https://caniuse.com/?search=revert）。因此，如果您要隐藏元素，请使用：

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

用于可见性的使用

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

这个posolite不关心元素类型

注意： revert 关键字与 initial 关键字不同，不应混淆。 initial 关���字使用 CSS 规范中每个属性定义的 初始值。相比之下， 用户代理样式表根据 CSS 选择器设置默认值。

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

- askrynnikov

Answer 6

你可以使用opacity，它类似于visibility，但允许平滑过渡并控制其他参数，如高度（为了简化代码段，我直接在html中放置了js逻辑-不要在生产代码中这样做）。

.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>

- Kamil Kiełczewski

Answer 7

使用CSS使元素不可见

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

使用Javascript使其可见。

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

- Dilip Kumar Choudhary

Answer 8

ID 是您 div 的名称。请确保在 Div 中添加 runat="server"。

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

- toly P

Answer 9

使用DOM元素的“hidden”属性：

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

- Andrey Hohutkin