首先来看网上的方法

方法一:

document.querySelector("#id").style.visibility="hidden";

document.querySelector("#id").style.visibility="visible";

注:该方法隐藏元素之后,仍占用空间,显示出空白区域

方法二:

document.getElementById("#id").style.display="none";

document.getElementById("#id").style.display="block";

注:该方法隐藏元素之后,不占用空间

接着,我们用上面的方法二,因为这样不会显示空白空间

完整的一个html页面代码:

<div id="div1" style="width:50px;height:100px;bground:#fff">画面1</div>

<button onclick="kz()">点我隐藏画面</button>


<script>
function kz(){
    document.getElementById("div1").style.display="none";
    //控制元素隐藏
}
</script>

注意,请在线上测试,这个代码我发现浏览器f12或者本地环境测试会有浏览器安全限制,导致js不能被正常执行

发表评论

您的电子邮箱地址不会被公开。