Soru görünürlük ayarı gizle / göster


Arasındaki fark nedir element.css('visibility', 'visible') ve element.show(). Ayrıca, arasındaki fark nedir element.css('visibility', 'hidden') ve element.hide()?

Güncelleştirme: Ayrıca, bir öğeyi gizlemenin en uygun yolu nedir? ve tüm unsurlarının alt ağacı?

N2'yi güncelle: Bir öğenin (ve alt ağacının) görünüp görünmediğini bilmek için uygun yol hangisidir? element.is(':visible') veya element.css('visibility')?

N3'ü güncelle: Bir öğeyi (tamamen) gizlemenin bir yolu var mı, ancak yine de tarayıcı sayfasındaki alanı / alanı saklayacak mı? (aldığım kadarıyla - uygun şekilde aramak olurdu hide() ancak sayfa görsel yeniden yapılandırmasına yol açabilir.


18
2018-01-10 09:35


Menşei


Eğer bir eleman gizlenirse (her ne şekilde olursa olsun), tüm torunları da saklanır. Ayrıca, .hide() belgeleri: "Bu kabaca kabaca eşittir .css('display', 'none')[...]". - Felix Kling
İlgili: Görünürlük: gizli ve görüntü arasındaki fark nedir: yok - Shadow Wizard
Sorunuz üç soru içeriyor, bunların hangisi, eminim, bazıları zaten cevaplandırıldı. - Felix Kling


Cevaplar:


Görünürlük, Tarayıcınızdaki alanı rezerve edecektir.

Gizli bir öğe ayarlandı display: none Böylece bu elementin kapladığı tüm alan çöker. Öğeyi yalnızca visibility: hidden eleman sadece saydamlaşacak, ancak eleman hala oradaymış gibi bir yer işgal edecek.

.hide() eşittir .css('display', 'none')
.show() olduğu eşit için .css('display', 'block') - Eminim jQuery gerçekten olup olmadığına karar vermek için biraz sihir yapar block Oraya girmeli ama biraz eşit.

@Güncelleştirme:
Bir öğeyi .hide() (veya .css('display', 'none')o dominant ağacın altındaki tüm unsurlar o unsurun çocuklarıdır.

@ Güncelleme 2:
Eğer kullanıyorsanız .hide() ve .show() onun .is(':visible') Görünürlük css özniteliğini kullanıyorsanız .css('visibility')

@ Güncelleme 3:
Tam olarak ne .css('visibility', 'hidden') yapar, sayfayı yeniden yapılandırmadan unsuru gizler. .hide() tamamen olacak "Kaldır" eleman


19
2018-01-10 09:38



Sadece bir addendum: onunla oynadığım kadarıyla visibility: hidden özyinelemeli değildir, yani sadece eleman (tüm alt ağaç değil) gizlenir. - BreakPhreak
Başka bir ek: visibility: hidden, is(':visible') hala dönecek true. - BreakPhreak


jquery.hide () çağrıya eşdeğerdir .css('display', 'none') ve ve jquery.show çağrıya eşdeğerdir .css('display', 'block')

.css() yöntem sadece görünürlük özelliğini ayarlıyor.

Css bakış açısından fark:

visbility : hidden

Gizlenen değer oluşturulan kutuları görünmez yapar onları düzeninden kaldırmadan. Descendant kutuları görünür hale getirilebilir. Bunu gör

display : none

Hiçbiri, öğenin hiç bir kutu oluşturmasını sağlar. Göstergeler, görüntü özelliği hiçbiri dışındaki bir değere ayarlanmış olsa bile kutular üretemez.Bunu gör

İle gizli eleman hala üretilir.


3
2018-01-10 09:44





w3c'den alınanlar:

görünürlük: gizli bir öğeyi gizler, ancak yine de daha önce olduğu gibi aynı alanı alır. Öğe gizlenecek, ancak düzeni hala etkileyecektir.

ekran: hiçbiri bir öğeyi gizler ve herhangi bir yer almayacaktır. Öğe gizlenecek ve öğe orada olmadığından sayfa görüntülenecektir:


1
2018-01-10 09:39





Bardiir'in açıklamalarına ek olarak, "display: none" ve "görünürlük: gizli" nin iyi bir demosu http://www.w3schools.com/css/css_display_visibility.asp

"remove" düğmesi "display: none" ve "hide" düğmelerini "görünürlük: gizli" olarak ayarlar.


1
2018-01-21 22:46





2 farklı css özelliği ayarlıyorlar: gizle / show display mülk none, show bu ayarı, varsayılanın kullanılmasını sağlayacak şekilde kaldırır (ör. bir div için 'blok').

Diğer cevaplar arasındaki fark, çağrı yapılmasıdır. hide bir öğenin üzerinde, onun (ve tüm atalarının) herhangi bir yer almayacağı anlamına gelir. Ayar olarak nerede visibility için hidden Etkili olarak sadece elemanları tamamen şeffaf hale getirecektir (ancak yine de yer kaplar).

Düzenlemelerinizin cevapları için:

  1. Tüm ataları gizle (bu her iki yöntemle otomatik olarak yapılır).
  2. kullanım element.is(':visible') çünkü bu her iki visibility ve display özellikleri ve görmek için height ve width 0 değil, aynı zamanda atalara yinelemeli olarak gerçekleştirir, element.css('visibility') sadece sana söyler visibility elemanın
  3. Ayar element.css('visibility', 'hidden') bunu yapacak - arama element.hide().

1
2018-01-10 09:55