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

你能做点像这样的事吗

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

---

您可以使用

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'

或

---

假设您不使用jQuery之类的库

如果您还没有对DOM元素的引用，请使用

var elem=document.getElementById（'id'）获取一个

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

调整
style.display
将看起来好像元素根本不存在（“已删除”）

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


如果您使用的是jQuery，只要您想设置
display
属性，就可以更轻松地执行此操作：

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

它将自动使用适当的
显示
值；您不必关心元素类型（内联或块）。此外，
elem
不仅可以是一个DOM元素，还可以是一个选择器，如
\id
或
.class
或任何其他有效的CSS3（以及更多！）。
您可以使用
不透明度
，它类似于
可见性
，但允许平滑过渡和控制其他参数，如高度（为了代码片段的简单性，我将js逻辑直接放在html中-不要在生产代码中这样做）


.box{宽度：150px；高度：150px；背景：红色；过渡：0.5s}
.hide{不透明度：0；高度：10px}

切换
您可以使用DOM函数：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';

为什么不直接使用Jquery？.hide（）？我会用它作为div的名称，所以如果div被命名为test，我会做
test.hide（）
？@JackStone:不，那只是在你已经在使用Jquery库的情况下。有些人只是喜欢在每个JavaScript问题上推广它。即使你是，
.hide（））
不设置可见性。它设置显示。@我不是，你显然没有理解，对于这样的问题，一个好的答案应该包含一个简单的JS解决方案和一个显示使用库优势的解决方案——在这种情况下，在使用
显示
显示元素时，不必处理内联vs块。
visi可扩展性
的副作用是元素占用的空间保持保留。这可能是OP想要的，也可能不是OP想要的。在它显示[DIV]的地方，我会键入我的DIV的名称，对吗？不，使用
document.getElementById（'id-of-the-DIV'）
而不是
[DIV]
@JackStone:这取决于你所说的“名称”是什么意思如果它是引用div的变量，则为yes。因此，如果我的div是name
testdiv
，则它将是
document.getElementById（'testdiv'）.style.visibility='hidden'；
？
div.style.visibility=false
在Chrome中对我不起作用。而
true
部分似乎更多地是出于偶然，因为它取消了属性设置（但不是我的否决票）
display
和
visibility
都不是布尔属性。除此之外，
none
和
block
需要引用，因为它们是字符串。标签的值是错误的。这些值现在起作用了，不，我不打算修改，这太简单了。我更喜欢你的答案，但我想你已经做了一些更正使用elem.style.display='none'；有时可以接受。关于可见性，何时使用hidden而不是none？当您想隐藏元素但将其保留在布局中时（即它仍将使用空间，就好像它是可见的）。您可以通过示例和解释来增强您的答案吗。
function showDiv(isVisible)
{
    [DIV].hidden = !isVisible;
}

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

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