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

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

　　一般的方法是通过属性控制来达到的，比如hidden属性、display属性、visibility属性、opacity属性等来操作，在练习中可以看到通过visibility属性来控制，页面不发生跳动，这个细节对用户体验比较好，控制透明度也可以。

　　代码如下：

    
    
    
    JavaScript的元素可见与不可见
    
        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="隐藏";
            };
        }

    


    

        
        
文本输入框： 

        
        
文本输入框： 

        
        
文本输入框： 

        
        
文本输入框： 

    

浏览页面：