CSS aturan visibility:hidden
dan display:none
kedua hasil pada elemen yang tidak terlihat. Ini sinonim?
display:none
berarti bahwa tag tersebut akan muncul pada halaman sama sekali (meskipun anda masih dapat berinteraksi dengan itu melalui dom). Tidak akan ada ruang yang dialokasikan untuk itu antara lain kategori.
visibility:hidden
berarti bahwa tidak seperti display:none
, tag tidak terlihat, tapi ruang yang dialokasikan untuk itu pada halaman. Tag ini diberikan, itu hanya isn't dilihat di halaman.
Misalnya:
test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test
Mengganti [gaya-tag-nilai]
dengan display:none
hasil:
test | | test
Mengganti [gaya-tag-nilai]
dengan visibility:hidden
hasil:
test | | test
Mereka tidak sinonim.
display:none
menghilangkan elemen dari aliran normal dari halaman, yang memungkinkan unsur-unsur lain untuk mengisi.
visibility:hidden
daun elemen dalam aliran normal dari halaman tersebut yang masih menempati ruang.
Bayangkan anda berada di jalur untuk naik di sebuah taman hiburan dan seseorang di line akan jadi gaduh bahwa keamanan membuang mereka dari baris. Semua orang di line kemudian akan bergerak maju satu posisi untuk mengisi sekarang slot kosong. Ini seperti display:none
.
Kontras ini dengan situasi yang sama, tetapi bahwa seseorang di depan anda memakai jubah gaib. Saat melihat garis, maka akan terlihat seperti ada ruang kosong, tetapi orang-orang dapat't benar-benar mengisi yang kosong mencari ruang karena seseorang masih ada. Ini seperti visibility:hidden
.
Satu hal yang layak menambahkan, meskipun itu bukan't bertanya, adalah bahwa ada pilihan ketiga membuat objek benar-benar transparan. Pertimbangkan:
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 menunjuk keluar (yaitu, 2 masih membutuhkan ruang). Namun, ada perbedaan antara 2 dan 3: dalam kasus 3, mouse masih akan beralih ke tangan ketika melayang di atas link, dan pengguna masih dapat klik pada link, dan Javascript acara masih akan api pada link. Hal ini biasanya tidak perilaku yang anda inginkan. Perilaku ketika memilih teks yang dapat bervariasi antara browser juga.
Ada perbedaan besar ketika datang ke node anak. Misalnya: Jika anda memiliki orang tua div dan bersarang anak div. 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 divs akan terlihat. Tapi jika anda menulis seperti ini:
<div id="parent" style="visibility:hidden;">
<div id="child" style="visibility:visible;"></div>
</div>
Kemudian anak div akan terlihat sedangkan orang tua div tidak akan ditampilkan.
Mereka're tidak sinonim - display: none
menghilangkan elemen dari aliran halaman, dan sisa halaman mengalir seolah-olah bukan't ada.
visibility: hidden
menyembunyikan elemen dari pandangan tapi bukan aliran halaman, meninggalkan ruang untuk itu di halaman.
display: none
menghilangkan elemen dari halaman seluruhnya, dan halaman yang dibangun seolah-olah unsur yang tidak ada sama sekali.
Visibility: hidden
meninggalkan ruang dalam dokumen mengalir meskipun anda tidak bisa lagi melihatnya.
Ini mungkin atau mungkin tidak membuat perbedaan besar tergantung pada apa yang anda lakukan.
Dengan visibility:hidden
objek masih membutuhkan ketinggian vertikal pada halaman. Dengan display:none
itu benar-benar dihapus. Jika anda memiliki teks di bawah gambar dan anda melakukan display:none
, bahwa teks akan bergeser ke atas untuk mengisi ruang di mana gambar itu. Jika anda melakukan visibility:hidden teks akan tetap di lokasi yang sama.
display:none
akan menyembunyikan elemen dan runtuhnya ruang ini adalah untuk mengambil, sedangkan visibility:hidden
akan menyembunyikan elemen dan melestarikan unsur-unsur ruang. display:none juga efek beberapa sifat tersedia dari javascript di versi IE dan Safari.
Selain itu untuk semua jawaban yang lain, ada's sebuah perbedaan penting untuk IE8: Jika anda menggunakan display:none
dan mencoba untuk mendapatkan elemen's lebar atau tinggi, IE8 kembali 0 (sementara browser lain akan mengembalikan ukuran sebenarnya). IE8 kembali benar lebar atau tinggi hanya untuk visibility:hidden
.
display: none;
Itu tidak akan tersedia pada halaman dan tidak menempati ruang.
visibility: hidden;
menyembunyikan sebuah elemen penting, tapi itu masih akan mengambil ruang yang sama seperti sebelumnya. Elemen yang akan disembunyikan, tapi masih, mempengaruhi tata letak.
visibility: hidden
melestarikan ruang, sedangkan display: none
doesn't melestarikan ruang.
Display None Contoh:https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none
Visibilitas Tersembunyi Contoh : https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility
Jika visibilitas properti diatur ke "tersembunyi"
, browser masih akan mengambil ruang pada halaman untuk isi meskipun itu's tidak terlihat.
Tapi ketika kita mengatur objek untuk "display:none"
, browser tidak mengalokasikan ruang pada halaman untuk isinya.
Contoh:
<div style="display:none">
Content not display on screen and even space not taken.
</div>
<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>
Salah satu perbedaan lain adalah bahwa visibility:hidden
bekerja di benar-benar, benar-benar tua browser, dan display:none
tidak:
Perbedaan melampaui gaya dan tercermin dalam bagaimana unsur-unsur berperilaku ketika dimanipulasi dengan JavaScript.
Efek dan efek samping dari display: none
:
clientWidth
, clientHeight
, offsetWidth
, offsetHeight
, scrollWidth
, scrollHeight
, getBoundingClientRect()
, getComputedStyle()
, semua kembali `0-an.Efek dan efek samping dari visibility: hidden
:
innerText
(tetapi tidak innerHTML
) dari target elemen dan keturunan mengembalikan string kosong.display:none;
tidak akan menampilkan elemen dan tidak akan membagikan ruang untuk elemen pada halaman, sedangkan visibility:hidden;
tidak akan menampilkan elemen pada halaman, tetapi akan membagikan ruang pada halaman.
Kita dapat mengakses elemen DOM dalam kedua kasus.
Untuk memahaminya dengan cara yang lebih baik silahkan lihat di kode berikut:
[display:none vs visibility:hidden][1]