元素隐藏的方式之hidden，display，visibility

虾米哥阅读：1143 2019-11-29 10:30:30 评论：0

<html lang="en">   
<head>   
    <meta charset="UTF-8">   
    <title>标签或者内容的隐藏</title>   
    <style>   
        .display-none{ 
            display:none; 
        } 
        .display-block{ 
            display:inline-block; 
        } 
        /* visibility属性 */ 
        .visibility-hidden{ 
            visibility:hidden; 
        } 
        .visibility-visible{ 
            visibility:visible; 
        } 
    </style>   
</head>   
<body>   
   <h3>1.hidden属性</h3> 
   <span id="hidden" hidden>通过hidden属性显示或隐藏</span> 
   <span  style="width:30px;height:30px;background-color:pink;" onclick="fnHidden()">hidden属性--点击</span> 
    <h3>2.style的display属性</h3> 
   <span id="display" class="display-none">通过display属性显示或者隐藏</span> 
   <span  style="width:30px;height:30px;background-color:pink;" onclick="fndDisplay()">display属性--点击</span> 
   <h3>2.style的display属性</h3> 
   <span id="visibility" class="visibility-hidden">visibility属性显示或者隐藏</span> 
   <span  style="width:30px;height:30px;background-color:pink;" onclick="fnVisibility()">visibility属性--点击</span> 
   <h2 style="color:red;">总结</h2> 
       方式1和方式2：隐藏元素不会占位置;<br/> 
       方式3，隐藏元素依旧占位子，避免空出位置。 
</body> 
<script type="text/javascript"> 
    /** 
     *hidden属性应用 --方式1 
     */     
     function fnHidden(){ 
         var ele = document.getElementById('hidden'); 
         var flag = ele.hasAttribute('hidden');//是否有hidden属性 
         if(flag){//隐藏 
             ele.removeAttribute('hidden'); 
         }else{//显示 
             ele.setAttribute('hidden','hidden'); 
         } 
     } 
      
     /** 
      *display属性--方式1 
      */ 
     function fndDisplay(){ 
         var ele = document.getElementById('display'); 
         var className = ele.className; 
         if(className == 'display-none'){//隐藏 
             ele.className = 'display-block' 
         }else{//显示 
             ele.className = 'display-none' 
         } 
     } 
      
     /** 
      *visibility属性--方式3 
      */ 
     function fnVisibility(){ 
         var ele = document.getElementById('visibility'); 
         var className = ele.className; 
         if(className == 'visibility-hidden'){//隐藏 
             ele.className = 'visibility-visible' 
         }else{//显示 
             ele.className = 'visibility-hidden' 
         } 
     } 
      
</script> 
</html>

标签:CSS JavaScript

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。