CSS属性中Display与Visibility与type:hidden区别

visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。

 

visibility属性用来确定元素是显示还是隐藏，这用visibility="visible|hidden"来表示，

visible表示显示，

hidden表示（仅）隐藏，不可恢复。

当visibility被设置为"hidden"的时候，元素虽然被隐藏了，

1、仍然占据它原来所在的位置。visibility会保留元素的位置.

2、元素被隐藏之后，就不能再接收到其它事件了，当其被设为"hidden"的时候，就不能再接收响应到事件了，因此也就无法通过JS令其显示出来。

 

display属性就有一点不同了。

none隐藏（元素消失），可恢复

inline,block显示

 

1、display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像<div>元素一样，它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block，使其可以像<div>一样工作。

2、display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如<div>，它也将会被组合成像<span>那样的输出流。最后是display被设置：none,这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。

 

 

 

    <!DOCTYPE html>  
    <html>  
    <script type="text/javascript" src="/jquery/jquery.js"></script>  
    <script type="text/javascript">  
    $(function(){  
      
      
    });  
      
    function w(){  
    $("#b").show();  
    }  
    function d(){  
    $("#b").hide();  
    }  
      
    function qq(){  
    $("#w").prop('type','text');    //改变属性 ，此处attr()不可用  
    }  
    </script>  
    <body>  
    <span id="a" hidden="hidden">我来了</span>  
    <p hidden="hidden" id="aa">这是一段隐藏的段落。</p>  
    <p>这是一段可见的段落。</p>  
      
    0:<input name="test" value="ww"  id="w" type="hidden" />  
    1:<input type="text" name="test" value=""  id="q" hidden = "hidden"></input>  
    2:<input type="text" name="test" value="test" style="display:none;" id="b"></input>  
    3:<input type="hidden" name="test" value="h" id="c"/><br>  
    4：<div id="ds" type="hidden">为什么</div>  
    <button onclick="w()">showMe</button>  
    <button onclick="d()">hideMe</button>  
    <button onclick="qq()">propMe</button>  
    </body>  
    </html>

 

提示：

1.input标签有type="hidden"属性 对hide()和show()方法不管用，但是可以通过prop改变属性type为text来解决；

2.但是div标签有type="hidden"属性对hide()和show()方法可用，div无type="hidden"属性；但是有hidden = "hidden"和style="display:none;"属性且对hide()和show()方法可用

3.然而input标签的hidden = "hidden"和style="display:none;"对hide()和show()方法可用。

 

posted @ 2017-02-28 15:26  陈泽创  阅读(243)  评论(0)    收藏  举报