Görüntülenecek bir tersi var mı: yok mu?

Karşıt visibility: hiddenIS visibility: visible. Benzer şekilde, tam tersi var display: nonemı?

Birçok insan display: none, visibilityözelliği kullanmak kadar net olmadığı için, bir öğeyi nasıl göstereceğini anlamaya karışır .

Bunun visibility: hiddenyerine sadece kullanabilirim display: none, ama aynı etkiyi vermez, bu yüzden onunla gitmiyorum.

display: nonetam tersi gibi visibility:hidden.

visibilityTesiste eleman görünür olup olmadığına karar verir. Bu nedenle, birbirine zıt iki durumu ( visibleve hidden) vardır.

displayMülkiyet, ancak, düzen kuralları unsuru takip edecek karar verir. Elementler CSS kendilerini ortaya koymak nasıl kuralları birkaç farklı türü vardır, bu yüzden birkaç farklı değerler vardır ( block, inline, inline-blockvs - bu değerler burada belgelerine bakın ).

display:none bir öğeyi sayfa düzeninden, sanki orada değilmiş gibi tamamen kaldırır.

Diğer tüm değerler display, öğenin sayfanın bir parçası olmasına neden olur, bu nedenle bir bakıma hepsi zıttır display:none.

Ama doğrudan tersi olan bir değer display:noneyok - tıpkı "kel" in tersi tek bir saç stili yokmuş gibi.

display: noneOrada gerçek bir zıtlık (henüz) yoktur.

Ama display: unsetçok yakın ve çoğu durumda çalışır.

Gönderen MDN'yi (Mozilla Geliştirici Ağı):

Unset CSS anahtar sözcüğü, başlangıç ​​ve devralma anahtar kelimelerinin birleşimidir. Diğer iki CSS geneli anahtar kelime gibi, CSS kısaltma da dahil olmak üzere herhangi bir CSS özelliğine uygulanabilir. Bu anahtar kelime, üst öğeden devralındığında mülkü devralınan değerine veya yoksa başlangıç ​​değerine sıfırlar. Başka bir deyişle, ilk durumda devral anahtar kelimesi gibi, ikinci durumda da ilk anahtar sözcük gibi davranır.

(kaynak: https://developer.mozilla.org/docs/Web/CSS/unset )

Ayrıca display: revertşu anda geliştirilmekte olduğunu unutmayın . Ayrıntılar için MDN'ye bakın.

Eleman en değiştirirken displayJavaScript, birçok durumda uygun bir seçenektir 'geri alma' olarak sonuç ait element.style.display = "none"olduğunu element.style.display = "". Bu display, styleözelliğin gerçek değerini displaybelgenin stil sayfasında ayarlanan değere (başka bir yerde yeniden tanımlanmamışsa tarayıcı varsayılanına) döndürerek özniteliği bildirimi kaldırır . Ancak daha güvenilir yaklaşım CSS'de bir sınıfa sahip olmaktır.

.invisible { display: none; }

ve bu sınıf adını / grubuna ekleme / kaldırma element.className.

kullanabilirsiniz

display: normal;

Normal olarak çalışır .... Onun css küçük bir hack;)

Kullandığım display:block; Bana uyar

Paul'un açıkladığı gibi, ekranın tam tersi yoktur: her öğenin farklı bir varsayılan ekranı olduğundan HTML'de hiçbiri yoktur ve ayrıca ekranı bir sınıf veya satır içi stille vb.

Ancak, jQuery gibi bir şey kullanırsanız, bunların show ve hide işlevleri, ekranın hiçbirinin tersi gibi davranır. Bir öğeyi gizleyip yeniden gösterdiğinizde, öğe gizlenmeden önce olduğu gibi görüntülenir. Bunu, elementin gizlenmesi sırasında display özelliğinin eski değerini saklayarak yaparlar, böylece tekrar gösterdiğinizde gizlemeden önce olduğu gibi görüntülenir. https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

Bu, örneğin bir satır içi veya satır içi blok görüntülemek üzere bir div ayarlarsanız ve onu gizleyip tekrar gösterirseniz, bir kez daha ekran satır içi veya satır içi blok olarak önceki gibi görünür

<div style="display:inline" >hello</div>
<div style="display:inline-block">hello2</div>
<div style="display:table-cell" >hello3</div>

senaryo:

  $('a').click(function(){
        $('div').toggle();
    });

Div'ın display özelliğinin gizlendikten (display: none) ve tekrar gösterildikten sonra bile sabit kalacağına dikkat edin.

Yazıcı dostu bir stil sayfasında, aşağıdakileri kullanıyorum:

/* screen style */
.print_only { display: none; }

/* print stylesheet */
div.print_only { display: block; }
span.print_only { display: inline; }
.no_print { display: none; }

Değer içeren bir form yazdırmam gerektiğinde ve giriş alanlarının yazdırılması zor olduğunda bunu kullandım. Bu yüzden bir span.print_only etiketine (div.print_only başka bir yerde kullanıldı) sarılmış değerleri ekledim ve .no_print sınıfını giriş alanlarına uyguladım. Ekranda giriş alanlarını ve yazdırıldığında sadece değerleri görürsünüz. Fantezi almak istiyorsanız, alanlar güncellendiğinde span etiketlerindeki değerleri güncellemek için JS'yi kullanabilirsiniz, ancak bu benim durumumda gerekli değildi. Belki de en zarif çözüm değil ama benim için çalıştı!

Display: block komutunu kullanabilirsiniz

Misal :

<!DOCTYPE html>
<html>
<body>

<p id="demo">Lorem Ipsum</p>

<button type="button" 
onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
<button type="button" 
onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html> 

Belirli kullanıcılar için gizli bir tablo istediğim, ancak diğerleri için değil bir uygulama istediğimde bu zorlukla karşılaştım.

Başlangıçta bunu display: none olarak ayarladım ama sonra display: block komutunu görmek istediğim kullanıcılar için ayarladım ama beklediğiniz biçimlendirme sorunlarını yaşadım (sütunları birleştiren veya genellikle dağınık).

Etrafımda çalışma şekli, önce tabloyu göstermek ve sonra görmek istemediğim kullanıcılar için "display: none" yapmaktı. Bu şekilde normal şekilde biçimlendirildi, ancak gerektiğinde kayboldu.

Biraz yanal bir çözüm ama birine yardım edebilir!

"hiçbiri" nin tersi, doğal reaksiyonla çalışırken "esnektir".

görünürlük: gizli öğeyi gizler, ancak öğe DOM'dur. Ve görüntüleme durumunda: hiçbiri öğeyi DOM'dan kaldırmaz.

Böylece, öğenin gizlenmesi veya gösterilmesi için seçeneğiniz vardır. Ancak bir kez sildiğinizde (yani hiçbirini göstermiyorum) karşıt değeri net değil. display, display: block, display: inline, display: inline-block ve diğerleri gibi çeşitli değerlere sahiptir. W3C'den kontrol edebilirsiniz.

En iyi cevap display: noneDİR

display:inline

veya

display:normal

Bunu kullanabilir display:block;ve ayrıcaoverflow:hidden;

En iyi "karşıt" değeri varsayılan değere döndürmek olacaktır:

display: inline