Pertanyaan Apa perbedaan antara visibilitas: tersembunyi dan tampilan: tidak ada?


Aturan CSS visibility:hidden dan display:none keduanya menghasilkan elemen yang tidak terlihat. Apakah ini sinonim?


926
2017-09-25 12:37


asal


Jawaban:


display:none berarti bahwa tag tersebut tidak akan muncul di halaman sama sekali (meskipun Anda masih dapat berinteraksi dengannya melalui dom). Tidak akan ada ruang yang dialokasikan untuk itu di antara tag lain.

visibility:hidden berarti tidak seperti itu display:none, tag tidak terlihat, tetapi ruang dialokasikan untuk itu di halaman. Tag diberikan, itu tidak terlihat di halaman.

Sebagai contoh:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Mengganti [style-tag-value] dengan display:none hasil dalam:

test |   | test

Mengganti [style-tag-value] dengan visibility:hidden hasil dalam:

test |                        | test

1179
2017-09-25 12:40



Mereka tidak sinonim.

display:none menghapus elemen dari aliran normal halaman, memungkinkan elemen lain untuk diisi.

visibility:hidden meninggalkan elemen dalam aliran normal halaman seperti yang masih menempati ruang.

Bayangkan Anda berada di antrean untuk menumpang di taman hiburan dan seseorang di barisan menjadi begitu gaduh sehingga keamanan menarik mereka dari garis. Semua orang dalam antrean kemudian akan bergerak maju satu posisi untuk mengisi slot yang sekarang kosong. Ini seperti display:none.

Bandingkan hal ini dengan situasi yang sama, tetapi seseorang di depan Anda mengenakan jubah tembus pandang. Saat melihat garis, akan terlihat seperti ada ruang kosong, tetapi orang tidak dapat benar-benar mengisi ruang kosong itu karena seseorang masih ada di sana. Ini seperti visibility:hidden.


184
2017-09-25 13:50



Satu hal yang perlu ditambahkan, meskipun tidak ditanyakan, adalah bahwa ada opsi ketiga untuk membuat objek benar-benar transparan. Mempertimbangkan:

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

Dalam hal ini Anda mendapatkan:

1st link.
2nd        link.
3rd        link.

Perbedaan antara 1 dan 2 telah ditunjukkan (yaitu, 2 masih membutuhkan ruang). Namun, ada perbedaan antara 2 dan 3: dalam kasus 3, mouse akan tetap beralih ke tangan saat melayang di atas tautan, dan pengguna masih dapat mengeklik tautan, dan acara Javascript masih akan diaktifkan di tautan. Ini biasanya tidak perilaku yang Anda inginkan. Perilaku ketika memilih teks dapat bervariasi antar browser juga.


82
2017-10-02 21:27



display:none menghapus elemen dari aliran tata letak.

visibility:hidden menyembunyikannya tetapi meninggalkan ruang.


74
2017-09-25 12:39



Ada perbedaan besar pada simpul anak. Sebagai contoh: Jika Anda memiliki div orangtua dan div anak yang bertingkat. Jadi jika Anda menulis seperti ini:

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

Dalam hal ini tidak ada div akan terlihat. Tetapi jika Anda menulis seperti ini:

<div id="parent" style="visibility:hidden;">
     <div id="child" style="visibility:visible;"></div>
</div>

Kemudian div anak akan terlihat sedangkan div orangtua tidak akan ditampilkan.


53
2018-01-14 09:39



Mereka tidak sinonim - display: none menghapus elemen dari aliran halaman, dan sisa halaman mengalir seolah-olah tidak ada.

visibility: hidden menyembunyikan elemen dari tampilan tetapi bukan aliran halaman, menyisakan ruang untuk itu di halaman.


17
2017-09-25 12:41



display: none menghapus elemen dari halaman sepenuhnya, dan halaman dibangun seolah-olah elemen itu tidak ada sama sekali.

Visibility: hidden meninggalkan ruang dalam aliran dokumen meskipun Anda tidak lagi dapat melihatnya.

Ini mungkin atau mungkin tidak membuat perbedaan besar tergantung pada apa yang Anda lakukan.


14
2017-09-25 12:40



Dengan visibility:hidden objek masih membutuhkan ketinggian vertikal pada halaman. Dengan display:noneitu benar-benar dihapus. Jika Anda memiliki teks di bawah gambar dan Anda melakukannya display:none, teks itu akan bergeser ke atas untuk mengisi ruang tempat gambar berada. Jika Anda melakukan visibilitas: tersembunyi teks akan tetap berada di lokasi yang sama.


11
2017-09-25 12:41



display:none akan menyembunyikan elemen dan menutup ruang yang sedang berlangsung, sedangkan visibility:hidden akan menyembunyikan elemen dan melestarikan ruang elemen. display: none juga mempengaruhi beberapa properti yang tersedia dari javascript di versi lama IE dan Safari.


10
2017-09-25 12:41