Bagaimana Anda membuat div tersembunyi yang tidak membuat hentian garis atau ruang horizontal?

354

Saya ingin memiliki kotak centang tersembunyi yang tidak memakan ruang di layar.

Jika saya punya ini:

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

Saya tidak melihat kotak centang, tetapi masih membuat baris baru.

Jika saya punya ini:

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

tidak lagi membuat garis baru, tetapi membutuhkan ruang horisontal di layar.

Apakah ada cara untuk memiliki div tersembunyi yang tidak memakan ruang (vertikal atau horizontal?

leora
sumber
Apakah ada gunanya untuk div seperti itu?
Jonno_FTW
6
@ Jonno: Ini biasa digunakan di AJAX. Katakanlah Anda memiliki daftar item dengan segitiga pengungkapan. Anda ingin detail, atau subtree, muncul ketika pengguna mengklik segitiga pengungkapan. Jadi yang Anda lakukan adalah meletakkan <div id = "theID" style = "display: none;"> di mana detailnya harus dituju. Kemudian, ketika pengguna mengklik segitiga, Anda memindahkan segitiga ke posisi "setengah" (menunjuk ke tenggara) dan menjalankan permintaan AJAX untuk mengisi <div>. Ketika permintaan AJAX selesai, Anda memutar segitiga ke selatan dan menghapus "display: none;" dari gaya <div>. Perpustakaan script.aculo.us melakukan ini banyak.
Mike DeSimone

Jawaban:

717

Menggunakan display:none;

<div id="divCheckbox" style="display: none;">
  • visibility: hidden menyembunyikan elemen, tetapi masih membutuhkan ruang di tata letak.

  • display: none menghapus elemen sepenuhnya dari dokumen, itu tidak memakan ruang.

CMS
sumber
42
untuk menunjukkan div lagi (kalau-kalau ada yang perlu seperti saya) -<div id="divCheckbox" style="display: inline-block;">
anujin
14
@anujin: Kenapa inline-block? Nilai default displayuntuk div adalah block!
MMM
Apakah ada cara untuk melakukan yang sebaliknya? Untuk mengubah div dari display: nonemenjadi display: inline-blockatau setara tanpa div yang ditampilkan sekarang mengambil ruang dan memindahkan elemen DOM saya yang lain?
bpromas
1
mungkin layak memperbarui jawaban untuk menyertakan atribut global HTML tersembunyi yang tersedia sejak HTML5.1 yang pada dasarnya sama dengan mengatakan display: nonemeskipun langsung dari HTML. Namun setiap penggunaan displayproperti menimpa perilaku hiddenatribut global.
Marius Mucenicu
54

Sejak rilis HTML5 sekarang dapat dengan mudah dilakukan:

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

Catatan: Ini tidak didukung oleh beberapa browser lama, terutama IE <11.

Dokumentasi Atribut Tersembunyi ( MDN , W3C )

C_B
sumber
1
Ini lebih benar secara semantik daripada bersembunyi dengan CSS, ini lebih baik untuk aksesibilitas, dan didukung oleh semua browser utama. Itu harus menjadi jawaban yang diterima pada tahun 2020.
Robin Métral
29

Gunakan style="display: none;". Juga, Anda mungkin tidak perlu memiliki DIV, cukup dengan mengatur gaya display: nonepada kotak centang mungkin sudah cukup.

tvanfosson
sumber
Saya perlu menyembunyikan saya lansiran di halaman memuat dan ingin menampilkannya lagi di klik tombol. Mencoba visibility: hiddentetapi itu menunjukkan ruang kosong. style="display: none;"bekerja seperti pesona kecil :)
sohaiby
8

Selain jawaban CMS, Anda mungkin ingin mempertimbangkan untuk meletakkan style dalam stylesheet eksternal dan menetapkan style ke id, seperti ini:

#divCheckbox {
display: none;
}
Zeta Two
sumber
+1, itu saran yang bagus, tetapi bagaimana cara menampilkan hanya satu kotak centang tanpa memengaruhi semua visibilitas kotak centang lainnya?
Owais Qureshi
1
@dNetenoldier Pertanyaan lama tetapi harus ada jawaban di sini. Anda memiliki kelas css yang disebut invis dan Anda menambahkan / menghapusnya dari kotak centang atau div dengan id menggunakan JS.
DanielST
8

Karena Anda harus fokus pada kegunaan dan generalisasi dalam CSS, daripada menggunakan id untuk menunjuk ke elemen tata letak tertentu (yang menghasilkan file css besar atau banyak), Anda mungkin harus menggunakan kelas yang benar dalam file .css yang ditautkan:

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

atau untuk minimalis:

.hidden {
display: none;
}

Sekarang Anda cukup menerapkannya melalui:

<div class="hidden"> content </div>
Dave
sumber
kode terlihat jauh lebih bersih dengan cara ini! Saya lebih suka memiliki kelas lebih dari gaya inline
Harry Cho
5

Pertimbangkan <span>untuk mengisolasi segmen kecil markup yang akan ditata tanpa merusak tata letak. Ini tampaknya lebih idiomatis daripada memaksakan <div>tidak untuk menampilkan dirinya sendiri - jika kotak centang itu sendiri tidak dapat ditata seperti yang Anda inginkan.

Churcher yang kaya
sumber
4

Tampilkan / sembunyikan dengan klik mouse:

<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>

Sumber: Di sini

Mahdi Jazini
sumber
4

Untuk mencegah kotak centang mengambil ruang apa pun tanpa menghapusnya dari DOM, gunakan hidden.

<div hidden id="divCheckbox">

Untuk mencegah kotak centang mengambil ruang apa pun dan juga menghapusnya dari DOM, gunakan display: none.

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

Untuk menyembunyikan elemen secara visual , tetapi menyimpannya di html, Anda dapat menggunakan:

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

atau

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

Apa yang salah display:none? Ini menghapus elemen sepenuhnya dari html, sehingga beberapa fungsi mungkin rusak jika mereka perlu mengakses sesuatu di elemen tersembunyi.

THN
sumber
0

display: none;

Ini harus membuat elemen menghilang dan tidak memakan ruang.

Jose Luis Rasmussen Garcia
sumber
Terima kasih kepada orang-orang yang mengomentari pemformatan jawaban saya.
Jose Luis Rasmussen Garcia