`
java虫
  • 浏览: 536521 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Display与Visibility的区别

 
阅读更多
记录一下Display与Visibility的区别,用下面的例子看下效果就可以了。
1.Display
  display被设置为block时显示,设置为none时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填充
<script   language="JavaScript">   
    function   testDisplay(me){   
      if   (me.style.display=="block"){   
        me.style.display="none";   
        }   
      else   {   
          me.style.display="block";   
        }   
      }   
  </script>   
    
    111111111
  <div onclick="testDisplay(this)">查看display效果</div>   
	22222222


2.Visibility
  visibility属性用来确定元素是显示还是隐藏,这用visibility="visible|hidden"来表示,
  visible表示显示,hidden表示隐藏。当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。
<script   language="JavaScript">   
    function   testVisibility(me){   
      if   (me.style.visibility=="hidden"){   
        me.style.visibility="visible";   
        }   
      else   {   
        me.style.visibility="hidden";   
        }   
      }   
  </script>   
    
    33333333
  <div   onclick="testVisibility(this)">查看visibility效果</div>
    444444444
分享到:
评论

相关推荐

    display与visibility的区别

    ### Display与Visibility的区别 在网页布局与样式设计中,`display`与`visibility`属性是控制元素显示状态的两种常用方式。尽管它们都能达到隐藏或显示元素的目的,但两者之间存在本质的区别。本文将深入探讨这两种...

    对比: display, visibility(有代码)

    与此不同,`visibility` 属性只影响元素的可见性,不会影响布局。当 `visibility` 设为 `hidden` 时,元素虽然不可见,但仍然占用原有的空间。这在需要隐藏元素但保持其布局位置时非常有用: ```css .invisible { ...

    display和visibility的区别示例介绍

    在网页布局和样式设计中,`display` 和 `visibility` 是两个非常重要的CSS属性,它们都能用来控制元素的可见性,但实现方式和效果大不相同。本篇文章将深入探讨两者之间的区别,并通过示例来具体说明。 首先,`...

    CSS隐藏元素 display visibility opacity的区别.docx

    2. `visibility:hidden`:与`display:none`不同,`visibility:hidden`的元素仍然占据原有的空间,周围的元素不会移动。尽管元素内容不可见,但元素本身是存在的,可以被点击。由于元素的尺寸保持不变,因此不会触发...

    CSS属性中Display与Visibility区别分析

    在CSS中,`display`和`visibility`两个属性都是用于控制元素的可见性,但它们之间存在着本质的区别。首先,`visibility`属性主要用于决定元素是否可见,而不改变元素的布局。当`visibility`设置为`hidden`时,元素的...

    display和visibility的区别

    总结来说,`display` 和 `visibility` 的主要区别在于: 1. `visibility` 只改变元素的可见性,不改变布局,隐藏后仍保留空间。 2. `display` 不仅改变可见性,还影响布局,隐藏后不再占用空间。 在实际应用中,...

    CSS Display与Visibility的不同

    总之,`display`和`visibility`都是控制元素可见性的工具,但它们的核心区别在于是否保留元素的布局空间。`visibility:hidden`仅隐藏元素内容,保留空间;而`display:none`则同时移除元素及其占用的空间。了解这两者...

    JS中style.display和style.visibility的区别实例说明.docx

    style.visibility 属性也用于控制元素是否显示,但是它与 style.display 不同的是,它不会影响文档流的布局。当设置 style.visibility = "hidden" 时,元素将被隐藏,但是它在文档流中的位置仍然保留着,不会被后续...

    11_元素的隐藏-display-visibility.html

    11_元素的隐藏-display-visibility

    解决CSS中 display 与 visibility 的区别

    CSS中display和visibility属性都是用于控制页面元素的显示与隐藏的,但是它们在实现方式和效果上有本质的区别。理解这两个属性的不同对于Web前端开发至关重要,尤其是在进行动态网页制作时,合理使用这些属性能够更...

    css中display和visibility的用法和区别介绍

    在CSS中,`display`和`visibility`两个属性都是用于控制元素在页面上的显示状态,但它们的作用方式和效果有着显著的区别。 `display`属性主要影响元素的布局和类型。它有多种不同的值: 1. `block`:将元素转换为...

    通过display或visibility来实现HTML元素的显示与隐藏

    为了更好地理解display和visibility的差别,我们可以观察示例页面上div元素的表现。当使用display属性控制时,点击"DIV切换"按钮,相应的div元素会在显示与不显示之间切换,并且如果元素被隐藏,那么它不会占用任何...

    通过display或visibility来隐藏html元素

    通过下面的例子了解display和visibility的区别,简单的例子代码如下: 复制代码代码如下: &lt;html&gt; &lt;head&gt; &lt;title&gt;HTML元素的显示与隐藏控制&lt;/title&gt; [removed] function showAndHidden1(){ ...

    display:none和visibility:hidden的差别比较与演示代码

    前言: 在使用css隐藏栏位或物件的时候, 常常会使用到display:none和visibility:hidden这两个属性, 但却很容易分不清楚这两个的差别, 或是乾脆同时使用两种属性,来确保物件一定被隐藏, 其实我们可以很简单的来...

    JAVASCRIPT style 中visibility和display之间的区别

    在style属性中,有两个常用的属性可以用来控制元素的显示与隐藏:visibility和display。尽管这两个属性的目的相似,即控制元素的可见性,但它们在实现上有着明显的区别,这些区别对页面布局和元素的交互性有深远的...

Global site tag (gtag.js) - Google Analytics