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

javascript中 visibility和display的区别

 
阅读更多

 

     visibility属性用来确定元素是显示还是隐藏的,这用visibility="visible|hidden"来表示(visible表示显示,hidden表示隐藏)。
当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。

     display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征。
     当display被设置为block(块)时,容器中所有的元素将会被当作一个单独的块,就像<div>元素一样,它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block,使其可以像<div>一样工作。
     将display设置为inline,将使其行为和元素inline一样---即使它是普通的块元素如<div>,它也将会被组合成像<span>那样的输出流。
最后是display被设置:none,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填。(此时应用display: none;的元素相当于消失,而visibility: hidden;则只表示隐藏,位置还在。)

 

分享到:
评论

相关推荐

    JAVASCRIPT style 中visibility和display之间的区别

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

    display与visibility的区别

    在提供的示例代码中,通过JavaScript函数`toggleVisibility`和`toggleDisplay`展示了如何动态地切换元素的`visibility`和`display`属性。 ```html &lt;script language="JavaScript"&gt; function toggleVisibility(me) ...

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

    在 JavaScript 中,style.display 和 style.visibility 是两种常用的控制元素显隐的方法,但是它们之间有着根本的区别。 style.display style.display 属性用于控制元素是否显示,并且它还影响文档流的布局。当...

    对比: display, visibility(有代码)

    压缩包中的 `jquery-2.1.0.min.js` 文件是jQuery库的一个旧版本,jQuery简化了JavaScript操作,包括对 `display` 和 `visibility` 的控制。例如,使用jQuery可以这样切换元素的可见性: ```javascript $("#...

    display和visibility的区别示例介绍

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

    javascript获取隐藏元素(display:none)的高度和宽度的方法

    然而,当我们尝试获取一个CSS样式为display:none的元素的高度和宽度时,会发现常规的JavaScript方法无法直接获取这些尺寸值,因为display:none的元素没有物理尺寸。为了获得这些隐藏元素的尺寸信息,需要采用一些...

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

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

    javascript获取隐藏元素(display-none)的高度和宽度的方法.docx

    2. **MDN Web 文档**:提供了关于 `display` 和 `visibility` 的详尽解释以及 JavaScript 获取元素尺寸的方法。 3. **W3School**:提供了简单的示例和交互式演示。 通过以上方法,我们可以有效地解决获取 `display:...

    CSS Display与Visibility的不同

    在CSS布局中,`display`和`visibility`是两个非常重要的属性,它们分别负责控制元素的显示方式和可见性。虽然两者都能使元素在页面上不可见,但它们的机制和影响是不同的。 首先,`visibility`属性主要用于决定元素...

    js中style.display=&quot;&quot;无效的解决方法.docx

    - **`style.visibility`与`style.display`的区别:** 虽然`style.display`和`style.visibility`都能控制元素的可见性,但它们有不同的效果。`display:none`会移除元素及其占用的空间,而`visibility:hidden`则会让...

    CSS属性中Display与Visibility区别分析

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

    display与visiblity的区别.pdf

    在CSS样式设计中,`display`和`visibility`属性都是用来控制元素的可见性,但它们之间存在着显著的差异。理解这些差异对于精确地控制网页布局至关重要。 首先,`visibility`属性主要用于决定元素是否可见。当`...

    display none是什么意思?.docx

    Visibility 属性与 Display None 属性的区别在于,Visibility 属性只会隐藏元素,但元素仍然占用实际空间,而 Display None 属性则会将元素从文档流中移除,不占用实际空间。 Display None 是一个非常有用的 CSS ...

    display与visiblity的区别.docx

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

    show_hid.rar_show_显示 javascript

    当用户点击按钮时,JavaScript代码会触发事件,使得某个层的 visibility 或 display 属性发生变化,从而实现层的显示或隐藏。 在JavaScript中,控制元素显示和隐藏的常见方法有以下两种: 1. **改变`style.display...

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

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

    通过display或visibility来隐藏html元素

    在Web开发中,控制HTML元素的显示和隐藏是一个常见的...以上是关于display和visibility属性在隐藏HTML元素时的区别和使用方法。在实际开发中,开发者可以根据具体需求选择合适的属性进行操作,以达到预期的页面效果。

    javaScript\隐藏控件的方法.doc

    JavaScript是Web开发中不可或缺的一部分,尤其在处理页面交互和动态效果时。隐藏控件是JavaScript中常见的需求,例如根据用户操作或逻辑条件控制界面元素的可见性。在JavaScript中,有以下两种主要方法来实现这一...

    JavaScript中的style.display属性操作

    JavaScript中的`style.display`属性是用于操作HTML元素的可见性和布局方式的重要属性。它允许开发者动态地改变元素的显示状态,比如隐藏或显示某个元素,或者更改元素的显示类型。这个属性是CSS(层叠样式表)的一...

Global site tag (gtag.js) - Google Analytics