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>