JS中的style物件中的display屬性和visibility屬性的區別
阿新 • • 發佈：2019-02-04
<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>
<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>