Satır sonu veya yatay boşluk oluşturmayan gizli bir div nasıl oluşturulur?

354

Ekranda yer kaplamayan gizli bir onay kutusuna sahip olmak istiyorum.

Eğer buna sahipsem:

<div id="divCheckbox" style="visibility: hidden">

Onay kutusunu göremiyorum, ancak yine de yeni bir satır oluşturuyor.

Eğer buna sahipsem:

<div id="divCheckbox" style="visibility: hidden; display:inline;">

artık yeni bir çizgi oluşturmuyor, ancak ekranda yatay alan kaplıyor.

Hiç yer kaplamayan gizli bir div'in (dikey veya yatay) bir yolu var mı?

html  hidden 
— Leora
kaynak
Böyle bir div için herhangi bir faydası var mı?
— Jonno_FTW
6
@Jonno: AJAX'ta yaygın olarak kullanılır. Açıklama üçgenleri olan öğelerin bir listeniz olduğunu varsayalım. Kullanıcı açıklama üçgenini tıklattığında ayrıntıların veya bir alt ağacın görünmesini istiyorsunuz. Böylece, yaptığınız şey <div id = "theID" style = "display: none;"> ayrıntıların gitmesi gereken yere koymaktır. Ardından, kullanıcı üçgeni tıklattığında, üçgeni "yarım" konuma (güneydoğu yönünde) taşır ve <div> doldurmak için AJAX isteğini tetiklersiniz. AJAX isteği bittiğinde, üçgeni güneye çevirir ve "display: none;" <div> 'in stilinden. Script.aculo.us kütüphanesi bunu çok yapar.
— Mike DeSimone

Yanıtlar:

718

kullanım display:none;

<div id="divCheckbox" style="display: none;">

  • visibility: hidden öğeyi gizler, ancak düzende hala yer kaplar.

  • display: none öğeyi belgeden tamamen kaldırır, yer kaplamaz.

— CMS
kaynak
42
<div id="divCheckbox" style="display: inline-block;">
— div'ı
14
@anujin: Neden inline-block? displayBir div için varsayılan değer block!
— MMM
Tam tersini yapmanın bir yolu var mı? Görüntülenen div yer kaplayıp diğer DOM öğelerimi hareket ettirmeden div display: nonedeğerini display: inline-blockveya eşdeğerini değiştirmek için ?
— bpromas
1
Küresel HTML öznitelik eklemek cevabını güncellenmesi değer olabilir gizli beri mevcuttur HTML5.1 temelde söyleyerek aynıdır display: noneHTML düz olmasına rağmen. Ancak, displayözelliğin herhangi bir şekilde kullanılması hiddengenel özniteliğin davranışını geçersiz kılar .
— Marius Mucenicu
54

HTML5'in yayınlanmasından bu yana artık şunları yapabilirsiniz:

<div hidden>This div is hidden</div>

Not: Bu, özellikle IE <11 olmak üzere bazı eski tarayıcılar tarafından desteklenmez .

Gizli Özellik Belgeleri ( MDN , W3C )

— C_B
kaynak
1
Bu, CSS ile gizlenmekten daha anlamsal olarak doğrudur, erişilebilirlik için daha iyidir ve tüm büyük tarayıcılar tarafından desteklenir. 2020'de kabul edilen cevap olmalı.
— Robin Métral
29

Kullanın style="display: none;". Ayrıca, muhtemelen DIV'ye ihtiyacınız yoktur, sadece display: noneonay kutusunun stilini ayarlamak muhtemelen yeterli olacaktır.

— tvanfosson
kaynak
Beni sayfa yüklerken uyarı msj gizlemek gerekir ve düğme tıklamasıyla tekrar göstermek istedim. Denedim visibility: hiddenama bu boş yer gösteriyordu. style="display: none;"küçük bir çekicilik gibi çalıştı :)
— sohaiby
8

CMS´ yanıtına ek olarak, stili harici bir stil sayfasına koymayı ve stili kimliğe atamayı düşünebilirsiniz:

#divCheckbox {
display: none;
}
— Zeta Two
kaynak
+1, bu gerçekten iyi bir öneri, ancak diğer tüm onay kutularının görünürlüğünü etkilemeden yalnızca bir onay kutusunu nasıl gösterebilirim?
— Owais Qureshi
1
@dotNetSoldier Eski soru ama burada bir cevap olmalı. İnvis adında bir css sınıfınız var ve JS'yi kullanarak ID ile onay kutusuna veya div'e ekleyip kaldırıyorsunuz.
— DanielST
8

CSS'de kullanılabilirliğe ve genelliğe odaklanmanız gerektiğinden, belirli bir düzen öğesine (büyük veya birden fazla css dosyasıyla sonuçlanır) işaret etmek için bir kimlik kullanmak yerine, bağlı olan .css dosyanızda muhtemelen gerçek bir sınıf kullanmalısınız:

.hidden {
visibility: hidden;
display: none;
}

veya minimalist için:

.hidden {
display: none;
}

Şimdi basitçe şu şekilde uygulayabilirsiniz:

<div class="hidden"> content </div>
— Dave
kaynak
kodu bu şekilde çok daha temiz görünüyor! Satır içi stil üzerinde bir ders almayı tercih ediyorum
— Harry Cho
5

Kullanmayı düşünün <span>düzenini bozmadan tarz edilecek işaretleme küçük segmentlerini izole etmek. Bu, <div>kendisini bir gösterilmemeye zorlamaktan daha deyimsel görünebilir - aslında onay kutusunun kendisi istediğiniz şekilde şekillendirilemezse.

— Zengin Churcher
kaynak
4

Fare tıklamasıyla göster / gizle:

<script language="javascript">

    function toggle() {

        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");

        if (ele.style.display == "block") {

            ele.style.display = "none";
            text.innerHTML = "show";
        }
        else {

            ele.style.display = "block";
            text.innerHTML = "hide";
        }
    }
</script>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here

<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

Kaynak: İşte

— Mehdi Jazini
kaynak
4

Herhangi yer almaktan onay kutusunu önlemek için olmadan DOM, kullanım çıkarmadan hidden.

<div hidden id="divCheckbox">

Onay kutusunun yer kaplamasını ve aynı zamanda DOM'dan kaldırmasını önlemek için kullanın display: none.

<div id="divCheckbox" style="display:none">
— smac89
kaynak
3

Öğeyi görsel olarak gizlemek , ancak html'de tutmak için şunları kullanabilirsiniz:

<div style='visibility:hidden; overflow:hidden; height:0; width:0;'>
  [content]
</div>

veya

<div style='visibility:hidden; overflow:hidden; position:absolute;'>
  [content]
</div>

Neler yanlış gidebilir display:none? Öğeyi html'den tamamen kaldırır, böylece gizli öğedeki bir şeye erişmeleri gerekiyorsa bazı işlevler bozulabilir.

— THN
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.