Saya menggunakan visibility:hiddenuntuk menyembunyikan elemen-elemen tertentu, tetapi mereka masih mengambil ruang di halaman sambil disembunyikan.
Bagaimana saya bisa membuat mereka benar-benar menghilang secara visual, seolah-olah mereka tidak ada di DOM sama sekali (tetapi tanpa benar-benar menghapusnya dari DOM)?
Jawaban:
Coba pengaturan display:noneuntuk menyembunyikan dan mengatur display:blockuntuk ditampilkan.
display: block, beberapa harus diatur ke display: inline(seperti <span>atau <a>atau <img>elemen DOM).
hiddendengan display: none. Tambahkan kelas ke elemen untuk menyembunyikannya, hapus itu tunjukkan. Saat menghapusnya, displayproperti dikembalikan ke elemen default.
Menggunakan display:noneadalah pilihan yang baik hanya untuk menghapus elemen TETAPI itu juga akan dihapus untuk pembaca layar . Ada juga diskusi jika efek SEO. Ada artikel pendek yang bagus tentang topik itu di A List Apart
Jika Anda benar-benar hanya ingin menyembunyikan dan tidak menghapus elemen, gunakan lebih baik:
div {
position: absolute;
left: -999em;
}Seperti ini dapat juga dibaca oleh pembaca layar.
Satu-satunya kelemahan dari metode ini adalah, DIV ini benar-benar dirender dan mungkin mempengaruhi kinerja , terutama pada ponsel.
visibility: hidden;, katakanlah Anda memiliki elemen absolut lainnya yang tidak akan memiliki konflik untuk ruang, hanya konflik z-index. Hanya untuk menyembunyikan elemen saya akan pergi denganvisibility
Lihat, alih-alih menggunakan visibility: hidden;gunakan display: none;. Opsi pertama akan bersembunyi tetapi masih membutuhkan ruang dan opsi kedua akan bersembunyi dan tidak memakan ruang.
Jawaban untuk pertanyaan ini adalah mengatakan untuk menggunakan tampilan: tidak ada dan menampilkan: blok, tetapi ini tidak membantu bagi seseorang yang mencoba menggunakan transisi css untuk menampilkan dan menyembunyikan konten menggunakan properti visibilitas.
Ini juga membuatku gila, karena menggunakan display membunuh transisi css.
Salah satu solusinya adalah menambahkan ini ke kelas yang menggunakan visibilitas:
overflow:hiddenAgar ini berfungsi tergantung pada tata letak, tetapi harus menyimpan konten kosong di dalam div tempatnya.
display: tidak ada solusi, Itu benar-benar menyembunyikan elemen dengan ruangnya.
display:nonedanvisibility: hiddenvisibility:hidden berarti tag tidak terlihat, tetapi ruang dialokasikan untuk itu pada halaman.
display:noneberarti sepenuhnya menyembunyikan elemen dengan ruangnya. (meskipun Anda masih dapat berinteraksi dengannya melalui DOM)
display:noneuntuk menyembunyikan dan mengatur display:blockuntuk ditampilkan.
as though they are not in the DOM at all (but without actually removing them from the DOM)
visibility: hiddenhanya menghentikan tampilan konten tetapi masih menggunakan ruang vertikal / horizontal, tampilan: tidak ada yang menghilangkan ruang vertikal / horizontal untuk elemen.
Beralih displaytidak memungkinkan untuk transisi CSS yang lancar. Alih-alih beralih baik itu visibilitydan max-height.
visibility: hidden;
max-height: 0;transform: translateX(-100%). Kami tidak ingindisplay: none
inilah cara lain untuk mengembalikannya: tidak ada. jangan gunakan tampilan: blok / sebaris dll. Sebaliknya (jika menggunakan javascript) atur tampilan properti css ke '' (mis. kosong)
di atas pengetahuan saya adalah mungkin dalam 4 cara
<button style="display:none;"></button>#buttonId{ display:none; }$('#buttonId').prop('display':'none');& $("#buttonId").css('opacity', 0);
offsetTop, dandisplay:noneakan menetapkanoffsetTopke 0. Solusi saya di sini adalah menggunakanvisibility: hiddenlalu mengatur lebar dan tinggi menjadi 0. Setelah saya perlu membuat elemen terlihat lagi, saya menghapus tiga atribut menggunakan Javascript. Sedikit solusi hacky, tetapi ini bekerja dengan baik untuk hampir semua kasus penggunaan.