Question

你能做点什么吗

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

Answer 1

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

[DIV].style.visibility='visible'

OR

[DIV].style.visibility='hidden'

Answer 2

假设您不使用jQuery等库。

如果您还没有对DOM元素的引用，请使用var elem = document.getElementById('id');

获取一个

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

调整style.display看起来好像元素根本不存在（＆＃34;删除＆＃34;）。

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仍然存在，但是＆＃34;所有空的＆＃34;或者＆＃34;所有白色＆＃34;

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（以及更多！）的选择。

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';

Answer 4

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

setAttribute and removeAttribute functions

快速浏览：

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

Answer 5

您可以使用与opacity类似的visibility，但可以平滑过渡并控制尺寸等其他参数

.box { width:150px; height: 150px; background: red; transition: all 0.5s ease }

.hide { opacity: 0; height:50px}

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

Answer 6

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

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

Answer 7

使用CSS使其不可见

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

使用Java脚本显示

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

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

7 个答案: