@KennyTM: dengan asumsi OP meminta secara khusus untuk membandingkan nilai masing-masing properti tersebut.
BoltClock
Jawaban:
111
The visibilityproperti hanya memberitahu browser apakah akan menampilkan elemen atau tidak. Bisa terlihat ( visible- Anda bisa melihatnya), atau tidak terlihat ( hidden- Anda tidak bisa melihatnya).
The displayproperti memberitahu browser bagaimana untuk menarik dan menunjukkan unsur, jika sama sekali - apakah itu harus ditampilkan sebagai inlineelemen (yaitu mengalir dengan teks dan elemen inline lain) atau blockelemen-tingkat (yaitu memiliki tinggi dan lebar sifat yang Anda dapat mengatur, itu apung, dll), atau inline-block(yaitu bertindak seperti kotak blok tapi diletakkan inline bukan) dan beberapa orang lain ( list-item, table, table-row, table-cell, flex, dll).
Saat Anda menyetel elemen ke display: blocktetapi juga menyetel visibility: hidden, browser masih memperlakukannya sebagai elemen blok, kecuali Anda tidak melihatnya. Seperti bagaimana Anda menumpuk kotak merah di atas kotak yang tidak terlihat: kotak merah tampak seperti mengambang di udara padahal sebenarnya kotak itu berada di atas kotak fisik yang tidak dapat Anda lihat.
Dengan kata lain, ini berarti elemen dengan displayyang tidak noneakan tetap memengaruhi aliran elemen di halaman, terlepas dari apakah elemen itu terlihat atau tidak. Kotak yang mengelilingi elemen dengan display: noneakan berperilaku seolah-olah elemen itu tidak pernah ada (meskipun tetap di DOM).
.. tidakkah tampilan ada hubungannya dengan DOM? misalnya ... jika sudah display: none;, maka elemen itu dihapus dari DOM? atau apakah saya benar-benar bingung?
Hristo
3
@Hristo: Sebenarnya tidak. Anda tidak akan pernah bisa memengaruhi posisi atau keberadaan elemen di DOM dengan CSS saja.
BoltClock
@ BoltClock ... ya, kamu benar. Saya menyadari bahwa Anda tidak akan pernah bisa mengeluarkan elemen dari DOM, tetapi hanya memengaruhi bagaimana elemen itu ditampilkan sehubungan dengan DOM. apakah itu terdengar lebih akurat?
Hristo
Satu hal penting untuk diperhatikan bahwa dengan menggunakan metode hide () jQuery, yang secara internal mengatur tampilan ke tidak ada, Anda tidak bisa mendapatkan posisi elemen ini. Saat menggunakan visibilitas, Anda dapat melakukannya.
p0rsche
21
visibilitas: tersembunyi;
elemen tidak akan dicat DAN tidak menerima peristiwa klik / sentuh, tetapi ruang yang dibutuhkan masih terisi
karena masih ada untuk tujuan tata letak, Anda dapat mengukurnya tanpa terlihat
mengubah konten akan tetap membutuhkan waktu untuk mengubah posisi / tata letak halaman
visibilitas diwariskan, jadi ini berarti Anda dapat membuat anak-anak terlihat dengan memberi mereka visibilitas: terlihat;
tampilan: tidak ada;
akan membuat elemen tidak berpartisipasi dalam aliran / tata letak
dapat (tergantung pada browser yang digunakan) mematikan film Flash dan iframe (yang akan dimulai ulang / dimuat ulang setelah ditampilkan lagi), meskipun Anda dapat mencegah hal ini terjadi dengan iframe
elemen tidak akan memakan tempat. untuk tujuan tata letak sepertinya tidak ada
akan membuat beberapa browser / perangkat (seperti iPad) secara langsung mengambil kembali memori yang digunakan oleh elemen itu, menyebabkan gangguan kecil jika Anda beralih antara tidak ada dan nilai lain selama animasi
catatan tambahan:
gambar dalam konten tersembunyi: di semua browser populer gambar masih dimuat, meskipun gambar tersebut berada dalam elemen apa pun dengan visibilitas: tersembunyi; atau display: none;
font dalam konten tersembunyi: browser webkit (Chrome / Safari) dapat menunda pemuatan font khusus yang hanya digunakan dalam elemen tersembunyi, termasuk melalui visibilitas atau tampilan. Hal ini dapat menyebabkan Anda mengukur elemen yang masih menggunakan font fallback hingga font kustom dimuat.
tampilan: tidak ada; akan menghapus gaya visual / ruang fisik elemen DOM dari DOM, sedangkan visibility: hidden; tidak akan menghapus elemen, tetapi hanya menyembunyikannya. Jadi div yang menempati 300px ruang vertikal di DOM Anda MASIH akan menempati 300px lebar vertikal ketika disetel ke visibility: hidden; tetapi jika disetel ke display: none; gaya visualnya dan ruang yang ditempati disembunyikan dan ruang tersebut kemudian "dibebaskan" karena tidak ada kata yang lebih baik.
[EDIT] - Beberapa waktu yang lalu saya menulis hal di atas, dan apakah saya tidak cukup berpengetahuan atau mengalami hari yang buruk, saya tidak tahu, tetapi kenyataannya adalah, elemen tersebut TIDAK PERNAH dihapus dari hierarki DOM. Semua 'gaya' tampilan level blok sepenuhnya 'tersembunyi' saat menggunakan display: none, sedangkan dengan visibility: hidden; elemen itu sendiri tersembunyi tetapi masih menempati ruang visual di DOM. Saya harap ini membereskan semuanya
Jawaban:
The
visibilityproperti hanya memberitahu browser apakah akan menampilkan elemen atau tidak. Bisa terlihat (visible- Anda bisa melihatnya), atau tidak terlihat (hidden- Anda tidak bisa melihatnya).The
displayproperti memberitahu browser bagaimana untuk menarik dan menunjukkan unsur, jika sama sekali - apakah itu harus ditampilkan sebagaiinlineelemen (yaitu mengalir dengan teks dan elemen inline lain) ataublockelemen-tingkat (yaitu memiliki tinggi dan lebar sifat yang Anda dapat mengatur, itu apung, dll), atauinline-block(yaitu bertindak seperti kotak blok tapi diletakkan inline bukan) dan beberapa orang lain (list-item,table,table-row,table-cell,flex, dll).Saat Anda menyetel elemen ke
display: blocktetapi juga menyetelvisibility: hidden, browser masih memperlakukannya sebagai elemen blok, kecuali Anda tidak melihatnya. Seperti bagaimana Anda menumpuk kotak merah di atas kotak yang tidak terlihat: kotak merah tampak seperti mengambang di udara padahal sebenarnya kotak itu berada di atas kotak fisik yang tidak dapat Anda lihat.Dengan kata lain, ini berarti elemen dengan
displayyang tidaknoneakan tetap memengaruhi aliran elemen di halaman, terlepas dari apakah elemen itu terlihat atau tidak. Kotak yang mengelilingi elemen dengandisplay: noneakan berperilaku seolah-olah elemen itu tidak pernah ada (meskipun tetap di DOM).sumber
display: none;, maka elemen itu dihapus dari DOM? atau apakah saya benar-benar bingung?visibilitas: tersembunyi;
tampilan: tidak ada;
catatan tambahan:
sumber
display: none menghilangkan elemen dari aliran html sedangkan visibility: hidden tidak.
sumber
tampilan: tidak ada; akan menghapus gaya visual / ruang fisik elemen DOM dari DOM, sedangkan visibility: hidden; tidak akan menghapus elemen, tetapi hanya menyembunyikannya. Jadi div yang menempati 300px ruang vertikal di DOM Anda MASIH akan menempati 300px lebar vertikal ketika disetel ke visibility: hidden; tetapi jika disetel ke display: none; gaya visualnya dan ruang yang ditempati disembunyikan dan ruang tersebut kemudian "dibebaskan" karena tidak ada kata yang lebih baik.
[EDIT] - Beberapa waktu yang lalu saya menulis hal di atas, dan apakah saya tidak cukup berpengetahuan atau mengalami hari yang buruk, saya tidak tahu, tetapi kenyataannya adalah, elemen tersebut TIDAK PERNAH dihapus dari hierarki DOM. Semua 'gaya' tampilan level blok sepenuhnya 'tersembunyi' saat menggunakan display: none, sedangkan dengan visibility: hidden; elemen itu sendiri tersembunyi tetapi masih menempati ruang visual di DOM. Saya harap ini membereskan semuanya
sumber
display: noneakan menghapus elemen dari DOM. Elemennya masih ada, hanya saja tidak ditampilkan .