`
ahut9923
  • 浏览: 239156 次
  • 性别: Icon_minigender_1
  • 来自: 安徽
社区版块
存档分类
最新评论

div的visibility和display属性区别

阅读更多

div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白:

  style="visibility: none;"

  document.getElementById("typediv1").style.visibility="hidden";//隐藏

  document.getElementById("typediv1").style.visibility="visible";//显示

  通过设置display属性可以使div隐藏后释放占用的页面空间,如下

  style="display: none;"

  document.getElementById("typediv1").style.display="none";//隐藏

  document.getElementById("typediv1").style.display="";//显示 



Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1675453

分享到:
评论

相关推荐

    display与visibility的区别

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

    JAVASCRIPT style 中visibility和display之间的区别

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

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

    JS 中 style.display 和 style.visibility 的区别实例说明 在 JavaScript 中,style.display 和 style.visibility 是两种常用的控制元素显隐的方法,但是它们之间有着根本的区别。 style.display style.display ...

    display属性.doc

    ### Display属性详解 #### 一、概述 `display` 属性是CSS中...通过以上详细说明,我们可以看出`display`属性在CSS布局中扮演着极其重要的角色,正确理解和运用这一属性能够帮助开发者更好地控制网页元素的呈现方式。

    display和visibility的区别示例介绍

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

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

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

    网页设计div的显示和隐藏

    本文将详细介绍如何通过CSS属性(如`visibility`和`display`)以及JavaScript来实现div的显示与隐藏功能。 #### 一、CSS中的visibility属性 `visibility`属性用于控制元素的可见性,主要分为以下几种状态: 1. **...

    HTML之CSS 布局 - display 属性

    `display` 属性是CSS中不可或缺的一部分,它对网页布局起着至关重要的作用。通过`display`属性,我们可以控制HTML元素的显示方式,从而...熟练掌握`display`属性的应用,将有助于我们创建更加美观和功能丰富的网页。

    CSS Display与Visibility的不同

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

    区别div和span、relative和absolute、display和visibility

    今天我们将深入探讨容易混淆的三个概念:`div`与`span`、`relative`与`absolute`以及`display`与`visibility`。 1. `div`与`span`的区别: - `div`是一个块级(block-level)元素,它会在页面上占据一整行,并且...

    div显示隐藏效果

    除了`display`属性,还可以使用`visibility`属性来实现类似的效果。`visibility: hidden`会让元素在页面上占据空间但不显示内容,而`visibility: visible`则使其可见。但是,使用`visibility`属性时,元素的布局不会...

    display与visiblity的区别.pdf

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

    DIV的显示和隐藏.docx

    总结来说,通过CSS的`display`和`visibility`属性,以及JavaScript的DOM操作,我们可以方便地控制网页上的`DIV`以及其他HTML元素的显示和隐藏,从而实现动态的交互效果。在实际开发中,这种控制方式广泛应用于下拉...

    display和visibility的区别

    visibility隐藏的对象还保留对象显示时所占的物理空间,display则不保留。 vilibility:hidden(隐藏)、visible(显示) style="vislbility:hidden" display:none(隐藏)、block(显示) style="display:none" 可以保存...

    CSS属性中Display与Visibility区别分析

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

    隐藏网页中的层DIV的技巧

    总之,理解并熟练运用 `visibility` 和 `display` 属性是网页开发中的重要技能。它们提供了灵活的方式来控制元素的可见性和布局,使得动态交互和用户体验得以优化。同时,掌握 CSS3 的相关动画特性,如 `opacity` 和...

    display none是什么意思?.docx

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

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

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

    解决CSS中 display 与 visibility 的区别

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

Global site tag (gtag.js) - Google Analytics