JavaScript(5)：页面元素的可见与不可见

最新推荐文章于 2023-11-07 18:39:23 发布

dawn

最新推荐文章于 2023-11-07 18:39:23 发布

阅读量954

点赞数

分类专栏： JavaScript 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/dawn0718/article/details/120857140

版权

JavaScript 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

　　控制页面元素的可见与不可见有很多方法，比如：将元素的位置移动到页面之外，或者将页面元素的颜色置为背景色，又或者被上层元素所覆盖等等。

　　一般的方法是通过属性控制来达到的，比如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>

浏览页面：