visibility和display区别-优快云博客

本文通过实例演示了如何使用CSS的visibility和display属性来隐藏页面元素，并对比了两种方式的不同之处。visibility设置为hidden会使元素不可见但仍保留其在布局中的空间；而display设置为none则完全移除元素，不占用任何空间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

它们都可以实现对域的隐藏，但visibility要占用域的空间，而display则不会！下面是一个测试

<html>
<head>
<title>标题测试</title>
<script language="javascript">
function testVisibility()
{
document.all("tb_0").style.visibility="hidden";
document.all("tb_1").style.visibility="visible";
}
function testDisplay()
{
document.all("tb_0").style.display="none";
document.all("tb_1").style.display="block";
}
function test()
{
document.all("tb_0").style.visibility="visible";
document.all("tb_1").style.visibility="visible";
document.all("tb_0").style.display="block";
document.all("tb_1").style.display="block";
}
</script>
</head>
<body>
<form name="form1" method="post">
<table id="tb_0">
<tr>
<td>内容测试--visible</td>
</tr>
</table>
<table id="tb_1">
<tr>
<td>内容测试--hidden</td>
</tr>
</table>
<input type="button" onClick="test();" value="还原">
<input type="button" onClick="testVisibility();" value="测试visibility">
<input type="button" onClick="testDisplay();" value="测试display">
</form>
</body>
</html>

现在不是很多网站都流行loading 字样么。

好象用这个能实现。

在网页前部加 <DIV id=Layer_Loading >正在加载请稍等……</DIV>

在网页最后加<SCRIPT>Layer_Loading.style.visibility="hidden";</SCRIPT>