js-元素的隐藏方式
2019-08-12 本文已影响0人
AssertDo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<input type="button" id="btn" value="点击隐藏" />
<div class="div" id="hideDiv"></div>
<span>跟着div的后面</span>
<script>
document.getElementById("btn").onclick = function () {
//第一种隐藏方式 --- 不占位
document.getElementById("hideDiv").style.display = "none";
//第二种隐藏方式 --- 占位
document.getElementById("hideDiv").style.visibility = "hidden";
//第三种隐藏方式 --- 占位
document.getElementById("hideDiv").style.opacity = 0;
//第四种隐藏方式 --- 占位
document.getElementById("hideDiv").style.height = "0px";
document.getElementById("hideDiv").style.border = "0px solid red";
};
</script>
</body>
</html>
