设置可见性与隐藏/显示 [英] setting visibility vs. hide/show

问题描述

element.css('visibility', 'visible')和element.show()有什么区别.另外，element.css('visibility', 'hidden')和element.hide()有什么区别?

What is the difference between element.css('visibility', 'visible') and element.show(). Also, what is the difference between element.css('visibility', 'hidden') and element.hide()?

更新:此外，隐藏元素和所有元素子树的最合适方法是什么?

Update: In addition, what is the most proper way to hide an element and all its elements' subtree?

更新N2 :哪种方法可以知道元素(及其子树)是否可见:element.is(':visible')或element.css('visibility')?

Update N2: Which is the proper way to know if an element (and its subtree) is visible: element.is(':visible') or element.css('visibility')?

更新N3 :是否可以完全隐藏元素，但是它仍会在浏览器页面上保留空间/区域? (据我所知-正确的方法是调用hide()，但这可能会导致页面的视觉重组.

Update N3: Is there a way to hide an element (completely), but it still will reserve the space/area on the browser page? (as far as I've got it - the proper way would be to call hide() but it might lead to the page visual restructuring.

推荐答案

可见性仍会在浏览器中保留空间.

Visibility will still reserve the space in your Browser.

一个隐藏元素设置为display: none，因此该元素占用的所有空间都将消失. 如果仅将元素设置为visibility: hidden，则该元素将变为透明，但空间将被占用，就像该元素仍在其中一样.

A hidden element is set to display: none thus all space occupied by this element collapses. If you only set the element to visibility: hidden the element will just go transparent but the space is occupied as if the element is still there.

.hide()等于.css('display', 'none')
.show()与.css('display', 'block')等价 -我很确定jQuery在这里做了一些魔术，以确定是否真的应该在block中使用它，但它还是相等的.

.hide() is equal to .css('display', 'none')
.show() is equal to .css('display', 'block') - I'm pretty sure jQuery does some magic here to decide if it's really block that should go in there but it's somewhat equal.

@更新:
用.hide()(或.css('display', 'none'))隐藏元素后，dom-tree中属于该元素的子元素的所有元素也将被隐藏.

@Update:
Once you hide an element with .hide() (or .css('display', 'none')) all elements down the dom-tree that are children of that element will be hidden too.

@Update 2:
如果您使用的是.hide()和.show()，则为.is(':visible') 如果您使用的是可见性css属性，则.css('visibility')

@Update 2:
If you are using .hide() and .show() it's .is(':visible') If you are using the visibility css attribute then .css('visibility')

@Update 3:
这正是.css('visibility', 'hidden')所做的，它隐藏了元素而不进行页面重组. .hide()将完全删除" 该元素.

@Update 3:
That's exactly what .css('visibility', 'hidden') does, it hides the element without the page restructuring. .hide() will completely "remove" the element.

这篇关于设置可见性与隐藏/显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！