HTML 点击按钮 删除或显示元素
2017-08-08 本文已影响17人
由宇婷
第一种，隐藏，即不可见。元素仍然存在，所以结构不会改变。
<!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>
