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

你能做点什么

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

如果[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或，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';

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

setAttribute和removeAttribute函数

快速浏览：

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

您可以使用opacity类似于，visibility 但可以平滑过渡并控制其他参数（例如高度）（为简化代码段，我将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元素的“隐藏”属性：

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

使用CSS使其不可见

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

使用JavaScript可见

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