javascript中Style之visibility与display的比较2009-02-20 23:56它们都可以实现对域的隐藏，但visibility要占用域的空间，而display则不会！下面是一个测试。
visibility="visible|hidden"来表示（visible表示显示，hidden表示隐藏）。
display="none|block|inline"来表示（vnone表示隐藏,block表示显示，block：会在该元素后换行。容器中所有的元素将会被当作一个单独的块，就像<div>元素一样，它会在那个点被放入到页面中。inline：会消除元素换行。行为和元素inline一样---即使它是普通的块元素如<div>，它也将会被组合成像<span>那样的输出流）。
<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>
一个更完善的例子：display="none|block|inline"的比较以及与visibility的比较：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>22222.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<h1>display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试</h1>
<P><SPAN id="oSpan" style="background-color: #CFCFCF;">This is a SPAN</SPAN> in a sentence.</P>
<P>
<input type=button value="Inline" οnclick="oSpan.style.display='inline'">
<input type=button value="Block" οnclick="oSpan.style.display='block'">
<input type=button value="None" οnclick="oSpan.style.display='none'">
<input type=button value="Hidden" οnclick="oSpan.style.visibility='hidden'">
<input type=button value="Visible" οnclick="oSpan.style.visibility='visible'">
</P>
<UL>
<LI>将元素设为 block，会在该元素后换行。</LI>
<LI>将元素设为 inline，会消除元素换行。</LI>
<LI>将元素设为 none，隐藏该元素内容。</LI>
</UL>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
