第一種,隱藏,即不可見。元素仍然存在,所以結構不會改變。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function removeElement()
{
if (document.getElementById("p1").style.visibility=="visible")
{
document.getElementById("p1").style.visibility="hidden";
}
else {
document.getElementById("p1").style.visibility="visible";
}
}
</script>
</head>
<body>
<h1>Hello</h1>
<p id="p1" style="visibility: hidden;">This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</p>
<input type="button" onclick="removeElement()"
value="Do not display paragraph" />
</body>
</html>
第二種,元素不顯示,可能改變結構。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function removeElement()
{
if(document.getElementById("p1").style.display=="none")
document.getElementById("p1").style.display="inherit";
else
document.getElementById("p1").style.display="none";
}
</script>
</head>
<body>
<h1>Hello</h1>
<p id="p1">This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</p>
<input type="button" onclick="removeElement()"
value="Do not display paragraph" />
</body>
</html>