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

Question

你能做点什么吗？

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

Answer 1

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

[DIV].style.visibility='visible'

要么

[DIV].style.visibility='hidden' 

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实际上会使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(和更多!).

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 和 removeAttribute 函数

快速浏览：

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