Sayfada yer kaplamalarına gerek kalmadan öğeleri nasıl gizleyebilirim?

229

visibility:hiddenBazı öğeleri gizlemek için kullanıyorum , ancak gizlendiklerinde sayfada hala yer kaplıyorlar.

Onları hiç DOM'da değilmiş gibi görsel olarak tamamen nasıl ortadan kaldırabilirim (ancak aslında DOM'dan kaldırmadan)?

html css

— ripper234
kaynak

Bu soru çok ölü, ama bir yorum ekliyorum çünkü son zamanlarda kendimi başkalarının yaşayabileceği bir durumda buldum. Ben bir öğe gizlemek ve gerekli o onun korumak zorundaoffsetTop ve display:nonekuracak offsetTopburada 0'a Benim çözüm kullanmak oldu visibility: hiddenben tekrar görünür elemanı yapmak için gereken kez daha sonra 0'a genişlik ve yüksekliğini ayarlamak, üç nitelikleri kullanarak kaldırıldı JavaScript. Biraz hacky bir çözüm, ama hemen hemen tüm kullanım durumları için iyi çalışıyor.

— 19'da rapçi

303

Gizlemeyi ayarlamayı display:noneve gösterilecek şekilde ayarlamayı deneyin display:block.

— Huusom
kaynak

Dom adamdan eleman çıkarmak mümkün değil. bu seçeneği kullanarak. soruyu okuyun

— Pranay Rana

26

tüm öğeler olmamalıdır display: block, bazılarının display: inline( <span>veya <a>veya <img>DOM öğeleri gibi) ayarlanması gerekir .

— Mauro

2

@pranay soru DOM onları kaldırmak için onları gizlemek diyor.

— Mauro

6

@pranay: Soru çok iyi ifade edilmiyor ama Huusom kullanıcının yaşadığı sorunu çözüyor.

— Claudio Redi

1

Bir iyileştirme: hiddenile adlandırılan bir CSS sınıfı oluşturun display: none. Sınıfı gizlemek için bir öğeye ekleyin, kaldırın. Kaldırırken displayözellik, öğenin varsayılan değerine geri yüklenir.

— Alejandro C De Baca

44

bunun yerine tarzı kullan

<div style="display:none;"></div>

— Salil
kaynak

1

Ne yazık ki bu benim için çalışmıyor - display kullanarak: hiçbiri hala boş bir alan bırakmıyor.

— mbuc91

15

Kullanımı display:nonesadece bir öğeyi kaldırmak için iyi bir seçenektir, ancak ekran okuyucular için de kaldırılacaktır . SEO'yu etkiliyorsa tartışmalar da var. Bu konuda iyi ve kısa bir makale varA List Apart'ta

Bir öğeyi gerçekten gizlemek ve kaldırmak istemiyorsanız , daha iyi kullanın:

div {
  position: absolute; 
  left: -999em;
}

Bunun gibi ekran okuyucuları tarafından da okunabilir.

Bu yöntemin tek dezavantajı, bu DIV'nin gerçekten oluşturulmuş olması ve özellikle cep telefonlarında performansı etkileyebilmesidir .

— alboth - undkonsorten.com
kaynak

2

çoğu durumda çalıştırabileceğiniz mutlak bir şey konumlandırmayı seçerseniz visibility: hidden;, alan için bir çakışma olmayacakları, sadece çatışacakları başka mutlak unsurlara sahip olduğunuzu varsayalım z-index. Sadece gideceğim bir elementi sakladığım içinvisibility

— Dejan.S

11

Kullanmak yerine, Bak visibility: hidden;kullanımını display: none;. İlk seçenek gizler ama yine de uzay ve gizler ikinci seçeneği alır ve yok herhangi bir yer kaplıyor.

— Alejandro Nava
kaynak

6

Bu sorunun cevabı display: none ve display: block komutunu kullanmaktır, ancak bu, görünürlük özelliğini kullanarak içeriği göstermek ve gizlemek için css geçişlerini kullanmaya çalışan birine yardımcı olmaz.

Bu da beni çıldırdı, çünkü ekran kullanmak herhangi bir css geçişini öldürüyor.

Bir çözüm bunu görünürlük kullanan sınıfa eklemektir:

overflow:hidden

Bunun çalışması düzeni düzenine bağlıdır, ancak boş içeriği bulunduğu div içinde tutmalıdır.

— Ömer
kaynak

3

Görünürlükle oynarsanız: gizli ve görünürlük: görünür ve eleman konumunuzu ayarlayın: sabit bu problemi yaşamayacaksınız, sihir gibi

— John Balvin Arias

6

display: none çözüm değildir, bu tamamen alanı ile öğeleri gizler.

Hakkında hikaye `display:none`ve`visibility: hidden`

visibility:hidden etiketin görünür olmadığı, ancak sayfada etiket için yer ayrıldığı anlamına gelir.

display:noneanlamına gelir elemanları ile alanı tamamen gizler. (yine de DOM aracılığıyla etkileşime girebilmenize rağmen)

— Hidayt Rahman
kaynak

4

Geçiş displayyapmak yumuşak CSS geçişlerine izin vermez. Bunun yerine hem . Hem visibilityde max-height.

visibility: hidden;
max-height: 0;

— Ahmad
kaynak

Bu, animasyonlarla çalışırken kullanışlıdır. Çünkü elementi görünür alanın dışında gibi bir şey saklıyoruz transform: translateX(-100%). Biz istemiyoruzdisplay: none

— zhuhang.jasper

3

display:nonegizlemek ve display:blockgöstermek için ayarlamak .

— Pranay Rana
kaynak

1

"DOM'da değilmiş gibi" görsel olarak kaldırmayı soruyor. Bunları gerçek DOM'dan kaldırmakla ilgili değil.

— Arve Systad

soru, bunları yalnızca yok olmaları için DOM'dan kaldırmamalarını belirtir. as though they are not in the DOM at all (but without actually removing them from the DOM)

— Mauro

@pranay: visibility: hiddenyalnızca içerik görüntüsünü durdurur, ancak yine de dikey / yatay boşluk kullanır, display: none öğe için dikey / yatay alanı kaldırmaz.

— Mauro

Hayır değil. görünürlük: gizli; öğeyi görünmez yapar, ancak yine de yer kaplar. görüntü yok; belgenin hiç orada değilmiş gibi davranmasını sağlar.

— Olly Hodgson

1

O zaman bu cevabı sil.

— BalusC

2

ekrandan sonra onları geri koymak için farklı bir bakış: yok. display: block / inline etc. kullanmayın. Bunun yerine (javascript kullanılıyorsa) css özellik ekranını '' (yani boş) olarak ayarlayın

— Anurag Priyadarshi
kaynak

1

$('#abc').css({"display":"none"});

bu, içeriği gizler ve ayrıca boş alan bırakmaz.

— SAnh
kaynak

1

bildiğim kadarıyla 4 şekilde mümkündür

HTML<button style="display:none;"></button>
CSS #buttonId{ display:none; }
jQuery $('#buttonId').prop('display':'none');ve $("#buttonId").css('opacity', 0);

— gdmanandamohon
kaynak

1

display: none , sayfadaki boşluktan kaçınmak için en iyi şey değildir

— Gil
kaynak

2

Diğer cevapların tekrarı gibi görünüyor.

— Pang

0

!importantMevcut CSS stillerini geçersiz kılmak zorunda kalırsanız kullanın .

display: none !important;

— jschnasse
kaynak

Sayfada yer kaplamalarına gerek kalmadan öğeleri nasıl gizleyebilirim?

Hakkında hikaye display:nonevevisibility: hidden

Hakkında hikaye `display:none`ve`visibility: hidden`