控制页面元素的可见与不可见有很多方法，比如：将元素的位置移动到页面之外，或者将页面元素的颜色置为背景色，又或者被上层元素所覆盖等等。
一般的方法是通过属性控制来达到的，比如hidden属性、display属性、visibility属性、opacity属性等来操作，在练习中可以看到通过visibility属性来控制，页面不发生跳动，这个细节对用户体验比较好，控制透明度也可以。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript的元素可见与不可见</title>
<script>
function isHidden(){
console.log("111");
if(document.getElementById("psp1").getAttribute("hidden")){
document.getElementById("psp1").removeAttribute("hidden")
document.getElementById("btn1").value="隐藏";
}else{
document.getElementById("psp1").setAttribute("hidden","hidden");
document.getElementById("btn1").value="显示";
};
}
function isStyle(){
if(document.getElementById("psp2").style.display=='' || document.getElementById("psp2").style.display=='inline-block'){
document.getElementById("psp2").style.display='none';
document.getElementById("btn2").value="显示";
}else{
document.getElementById("psp2").style.display='inline-block';
document.getElementById("btn2").value="隐藏";
};
}
function isVisibility(){
if(document.getElementById("psp3").style.visibility==''){
document.getElementById("psp3").style.visibility='hidden';
document.getElementById("btn3").value="显示";
}else{
document.getElementById("psp3").style.visibility='';
document.getElementById("btn3").value="隐藏";
};
}
function hasOpacity(){
if(document.getElementById("psp4").style.opacity==100){
document.getElementById("psp4").style.opacity=0;
document.getElementById("btn4").value="显示";
}else{
document.getElementById("psp4").style.opacity=100;
document.getElementById("btn4").value="隐藏";
};
}
</script>
</head>
<body>
<div id="demo">
<!-- 通过hidden属性来控制 -->
<div id="psp1">文本输入框： <input type="text" value="通过hidden属性来控制"></div><div><input type="button" value="隐藏" onclick="isHidden()" id="btn1"></div>
<!-- 通过display属性来控制 -->
<div id="psp2">文本输入框： <input type="text" value="通过display属性来控制"></div><div><input type="button" value="隐藏" onclick="isStyle()" id="btn2"></div>
<!-- 通过visibility属性来控制 -->
<div id="psp3">文本输入框： <input type="text" value="通过visibility属性来控制"></div><div><input type="button" value="隐藏" onclick="isVisibility()" id="btn3"></div>
<!-- 通过opacity属性来控制 -->
<div id="psp4">文本输入框： <input type="text" value="通过opacity属性来控制"></div><div><input type="button" value="隐藏" onclick="hasOpacity()" id="btn4"></div>
</div>
</body>
</html>
浏览页面：
?