`

hidden visible display 的区别

 
阅读更多

这三种方法都可用于网页上某个元素的隐藏,但三者存在区别。

hidden:在 HTML 表单中 <input type="hidden"> 标签每出现一次,一个 Hidden 对象就会被创建。

这个不可见的表单元素的value属性保存了一个要提交给Web服务器的任意字符串。如果要提交并非用户直接输入的数据,就是用这种类型的元素。

 

display的用法:

 

<body>
<span style="display:none; background-color:Blue">标签管理</span>
</body>

 

 

 display:none使对象在网页上不可见,并且不为被隐藏的对象保留空间,该对象在网页上彻底消失。

 

visible的用法:

<body>
<span style="visible:hidden; background-color:Blue">标签管理</span>
</body>

 visible:hidden 与display:none不同的是虽然使对象在网页上不可见,但该对象在网页上所占的空间没有改变。

 

 

分享到:
评论
3 楼 李智敏 2014-06-06  
哎呀哎呀!
2 楼 李智敏 2014-06-05  
不能回复,为什么没有回复功能
1 楼 wangsuting 2014-06-05  
呵呵呵呵呵呵

相关推荐

    visiblity:hidden和display:none的差异

    `visibility:hidden` 和 `display:none` 的主要区别在于,前者隐藏元素的同时保留其占据的空间,而后者则完全从布局中移除元素。这种差异在处理页面布局时尤为关键。例如,如果一个元素的 `display` 被设置为 `none`...

    实例详解display:none与visible:hidden的区别

    总的来说,理解 `display:none` 和 `visibility:hidden` 的区别对于优化网页性能和用户体验至关重要。正确使用它们可以让你更好地控制网页元素的可见性和布局,提升网站的可访问性和可用性。在实际工作中,应根据...

    display与visibility的区别

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

    display和visibility的区别示例介绍

    me.style.visibility = "visible"; } else { me.style.visibility = "hidden"; } } function isDisplay(me) { if (me.style.display === "none") { me.style.display = "block"; } else { me.style.display...

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

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

    微信小程序中hidden不生效原因的解决办法

    原因是`hidden`主要是针对块级元素设计的,对于`display: flex`这样的布局,它可能无法正常工作。 解决这个问题的一种方法是放弃使用`hidden`,转而利用CSS的`display`属性。如例子所示,可以动态地改变`display`...

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

    2. **临时修改样式**:将元素的 `display` 设置为 `block` 或 `inline-block`,或者将 `visibility` 设置为 `hidden`。 3. **获取尺寸**:使用 `.offsetWidth`、`.offsetHeight` 或 `getBoundingClientRect()` 来...

    jQuery可见性过滤器:hidden和:visibility用法实例

    本文实例讲述了jQuery可见性过滤器:hidden和:visibility用法。...查找所有display不为none的元素,$(“tr:visible”) 例子: &lt;tr id=onestyle&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt; &lt;tr id=twostyle=visib

    CSS:Visibility 和 Display 属性的比较.pdf

    `visibility`属性有四个可选值:`visible`(默认值,元素可见)、`hidden`(元素不可见但保留空间)、`collapse`(仅对表格元素有效,移除元素但不影响布局)和`inherit`(继承父元素的`visibility`值)。...

    CSS Display与Visibility的不同

    大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的。 visibility属性用来确定元素是显示还是隐藏的,这用visibility="visible|hidden"来表示(visible表示显示,...

    CSS:Visibility和Display属性的比较.pdf

    它有四个可能的值:`visible`(默认,元素可见)、`hidden`(元素不可见,但保留其占用的空间)、`collapse`(主要用于表格,移除元素但不影响布局)和`inherit`(继承父元素的`visibility`值)。当设置`visibility`...

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

    在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示,在style.display=block和style.visibility=visible的时候,元素被显示,在style.display=none和style.visibility=hidden的时候,元素...

    display和visibility的区别

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

    jQuery中:visible选择器用法实例

    这里的"可见"是指元素的`display`值不是`none`,并且`visibility`值不是`hidden`。这通常意味着元素占据着页面的空间,并且内容可以被用户看到。`:visible`选择器常常与其他选择器(如类选择器、ID选择器、元素选择...

    jQuery的中 is(‘:visible’) 解析及用法(必看)

    `:visible`选择器的基本原理是检查元素的CSS属性,如`display`和`visibility`,以及其尺寸和父元素的状态,来确定元素是否可见。以下是一些使元素被视为不可见的情况: 1. **设置为 `display:none`**:当一个元素的...

    jQuery的中 is(':visible') 解析及用法(必看)

    即使元素的 `visibility` 被设置为 `hidden`,只要它占据了空间,`is(':visible')` 就会返回 `true`。 - 如果元素的父容器隐藏,即便元素本身没有被 CSS 样式直接设置为不可见,它也会被视为不可见。 - 在使用 `....

    hide_display_Active.rar_hide

    标题"hide_display_Active.rar_hide"暗示了我们要探讨的是关于如何在应用程序中动态管理控件的可见性。下面我们将详细解释这一主题。 控件是用户界面的基本构建块,它们可以是按钮、文本框、复选框、菜单等,允许...

Global site tag (gtag.js) - Google Analytics