Apakah ada cara saya dapat memeriksa apakah suatu elemen terlihat di JS murni (tanpa jQuery)?
Jadi, misalnya, di halaman ini: Performance Bikes , jika Anda mengarahkan kursor pada Transaksi (pada menu atas), jendela transaksi muncul, tetapi pada awalnya tidak ditampilkan. Itu dalam HTML tetapi tidak terlihat.
Jadi, mengingat elemen DOM, bagaimana saya bisa mengecek apakah itu terlihat atau tidak? Saya mencoba:
window.getComputedStyle(my_element)['display']);
tapi sepertinya tidak berhasil. Saya ingin tahu atribut mana yang harus saya periksa. Itu muncul di benak saya:
display !== 'none'
visibility !== 'hidden'
Adakah orang lain yang mungkin saya lewatkan?
javascript
dom
Hommer Smith
sumber
sumber
document.getElementById('snDealsPanel').style.visibility
Jawaban:
Menurut dokumentasi MDN ini ,
offsetParent
properti elemen akan kembalinull
kapan pun, atau salah satu dari orang tuanya, disembunyikan melalui properti gaya tampilan. Pastikan saja bahwa elemen tersebut tidak diperbaiki. Sebuah skrip untuk memeriksa ini, jika Anda tidak memilikiposition: fixed;
elemen pada halaman Anda, mungkin terlihat seperti:Di sisi lain, jika Anda tidak memiliki elemen posisi tetap yang mungkin terjebak dalam pencarian ini, Anda akan sedih (dan perlahan-lahan) harus digunakan
window.getComputedStyle()
. Fungsi dalam kasus itu mungkin:Opsi # 2 mungkin sedikit lebih mudah karena ia menyumbang lebih banyak kasus tepi, tapi saya bertaruh itu jauh lebih lambat juga, jadi jika Anda harus mengulangi operasi ini berkali-kali, mungkin yang terbaik untuk menghindarinya.
sumber
el.offsetParent
tidak berfungsi pada IE9 untuk elemen yang tidak tetap. Atau begitulah tampaknya. (OK untuk IE11, meskipun.) Jadi pergi dengangetComputedStyle
setelah semua.getComputedStyle
tidak bekerja dengan benar: plnkr.co/edit/6CSCA2fe4Gqt4jCBP2wu?p=preview Namun demikian, apakahoffsetParent
- mungkin kombinasi dari keduanya harus digunakan?Semua solusi lain bangkrut untuk beberapa situasi bagi saya ..
Lihat pemecahan jawaban yang menang di:
http://plnkr.co/edit/6CSCA2fe4Gqt4jCBP2wu?p=preview
Akhirnya, saya memutuskan bahwa solusi terbaik adalah
$(elem).is(':visible')
- namun, ini bukan javascript murni. itu jquery ..jadi saya mengintip sumber mereka dan menemukan apa yang saya inginkan
Ini adalah sumbernya: https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
sumber
true
untuk elemen denganvisibility:hidden
visibility:hidden
tidak menampilkan konten lagi, tetapi masih membutuhkan lebar dan tinggi elemen!Jika Anda tertarik terlihat oleh pengguna:
Diuji pada (menggunakan terminologi moka ):
sumber
scrollIntoView
hak ?! Ini cukup mahal. Apakah ada cara pintar lain?Ini mungkin membantu: Sembunyikan elemen dengan memposisikannya pada posisi paling kiri dan kemudian memeriksa properti offsetLeft. Jika Anda ingin menggunakan jQuery, Anda cukup memeriksa pemilih : terlihat dan mendapatkan status visibilitas elemen.
HTML:
CSS:
javaScript:
jQuery:
jsFiddle
sumber
Gunakan kode yang sama dengan jQuery:
Jadi, dalam suatu fungsi:
Bekerja seperti pesona di Win / IE10, Linux / Firefox.45, Linux / Chrome.52 saya ...
Banyak terima kasih kepada jQuery tanpa jQuery!
sumber
e.offsetWidth
bilangan bulat,!e.offsetWidth
akan kembalifalse
jikae.offsetWidth
lebih tinggi dari nol (elemen terlihat). Jadi menambahkan yang lain!
sebagai!!e.offsetWidth
akan kembalitrue
jikae.offsetWidth
lebih tinggi dari nol. Ini adalah singkatanreturn e.offsetWidth > 0 ? true : false
atau jelasreturn e.offsetWidth > 0
.Menggabungkan beberapa jawaban di atas:
Seperti yang dikatakan AlexZ, ini mungkin lebih lambat daripada beberapa opsi Anda yang lain jika Anda tahu lebih spesifik apa yang Anda cari, tetapi ini harus menangkap semua cara utama elemen disembunyikan.
Tapi, itu juga tergantung apa yang dianggap terlihat oleh Anda. Sebagai contoh, ketinggian div dapat diatur ke 0px tetapi isinya masih terlihat tergantung pada properti overflow. Atau konten div bisa dibuat warna yang sama dengan latar belakang sehingga tidak terlihat oleh pengguna tetapi masih ditampilkan di halaman. Atau div bisa dipindahkan dari layar atau disembunyikan di balik div lain, atau isinya bisa tidak terlihat tetapi perbatasan masih terlihat. Sampai batas tertentu "terlihat" adalah istilah subyektif.
sumber
display:none
ini akan bagus. Solusi kerja yang tepat!Saya punya solusi yang lebih performan dibandingkan dengan solusi getComputedStyle () AlexZ ketika seseorang memiliki posisi elemen 'tetap', jika seseorang mau mengabaikan beberapa kasus tepi (periksa komentar):
Catatan tambahan: Secara tegas, "visibilitas" perlu didefinisikan terlebih dahulu. Dalam kasus saya, saya mempertimbangkan elemen yang terlihat selama saya bisa menjalankan semua metode / properti DOM tanpa masalah (bahkan jika opacity 0 atau properti visibilitas CSS 'tersembunyi' dll).
sumber
Jika elemen terlihat biasa (tampilan: blok dan visibillity: terlihat), tetapi beberapa wadah induk disembunyikan, maka kita dapat menggunakan clientWidth dan clientHeight untuk memeriksa itu.
Plunker (klik di sini)
sumber
ele.style.visibility !== 'hidden'
berlebihan di sini. Jika demikian, clientWidth dan clientHeight akan menjadi 0.Jika kami hanya mengumpulkan cara dasar mendeteksi visibilitas, jangan lupa:
Dan bagaimana cara mendapatkan atribut:
Jadi, dalam contoh Anda:
Tapi apa? Ini tidak berfungsi di sini. Lihatlah lebih dekat dan Anda akan menemukan bahwa visibilitas sedang diperbarui bukan sebagai atribut pada elemen, tetapi menggunakan
style
properti. Ini adalah salah satu dari banyak masalah dengan mencoba melakukan apa yang Anda lakukan. Antara lain: Anda tidak dapat menjamin bahwa sebenarnya ada sesuatu untuk dilihat dalam suatu elemen, hanya karena visibilitas, tampilan, dan opacity semuanya memiliki nilai yang benar. Mungkin masih kekurangan konten, atau mungkin memiliki tinggi dan lebar. Objek lain mungkin mengaburkannya. Untuk lebih detail, pencarian Google cepat mengungkapkan ini , dan bahkan menyertakan perpustakaan untuk mencoba memecahkan masalah. (YMMV)Lihatlah yang berikut, yang merupakan duplikat yang mungkin dari pertanyaan ini, dengan jawaban yang sangat baik, termasuk beberapa wawasan dari John Resig yang perkasa. Namun, case-use khusus Anda sedikit berbeda dari yang standar, jadi saya akan menahan diri untuk tidak memberi tanda:
(EDIT: OP MENGATAKAN HAL-HAL YANG MENGHANCURKAN, TIDAK MENCIPTAKAN MEREKA, BEGITU DI BAWAH INI TIDAK BERLAKU) Pilihan yang lebih baik? Ikat visibilitas elemen untuk memodelkan properti dan selalu membuat visibilitas bergantung pada model itu, seperti halnya Angular dengan ng-show. Anda dapat melakukannya dengan menggunakan alat apa pun yang Anda inginkan: Angular, JS polos, apa pun. Lebih baik lagi, Anda dapat mengubah implementasi DOM dari waktu ke waktu, tetapi Anda akan selalu dapat membaca status dari model, alih-alih DOM. Membaca kebenaran Anda dari DOM itu Buruk. Dan lambat. Jauh lebih baik untuk memeriksa model, dan percaya pada implementasi Anda untuk memastikan bahwa keadaan DOM mencerminkan model. (Dan gunakan pengujian otomatis untuk mengonfirmasi asumsi itu.)
sumber
Jawaban yang diterima tidak berhasil untuk saya. Tahun 2020 jawabannya :
1) Metode (elem.offsetParent! == null) berfungsi dengan baik di Firefox tetapi tidak di Chrome. Untuk Chrome "position: fixed;" juga akan membuat pengembalian offsetParent "null" bahkan elemen jika terlihat di halaman.
Demo:
Anda dapat melihat megatest orang ini https://stackoverflow.com/a/11639664/4481831 (jalankan dengan beberapa browser untuk melihat perbedaannya).
2) The (getComputedStyle (elem) .display! == 'tidak ada') tidak berfungsi karena elemen dapat tidak terlihat karena salah satu properti tampilan orang tua diatur ke tidak ada, getComputedStyle tidak akan menangkap itu.
Demo:
3) The (elem.clientHeight! == 0) . Metode ini tidak dipengaruhi oleh posisi tetap dan juga memeriksa apakah elemen orangtua tidak terlihat. Tetapi memiliki masalah dengan elemen sederhana yang tidak memiliki tata letak css, lihat lebih lanjut di sini
Demo:
4) The (elem.getClientRects (). Length! == 0) yang tampaknya mengatasi masalah dari 3 metode sebelumnya. Namun memiliki masalah dengan elemen yang menggunakan trik CSS (selain itu "display: none") untuk disembunyikan di halaman.
KESIMPULAN: Jadi yang saya tunjukkan kepada Anda adalah bahwa tidak ada metode yang sempurna. Untuk membuat pemeriksaan visibilitas yang tepat, Anda harus menggunakan kombinasi dari 3 metode terakhir.
sumber
Hanya untuk referensi perlu dicatat bahwa
getBoundingClientRect()
dapat bekerja dalam kasus-kasus tertentu.Misalnya, pemeriksaan sederhana bahwa elemen yang disembunyikan menggunakan
display: none
bisa terlihat seperti ini:Ini juga berguna karena juga mencakup lebar nol, tinggi nol, dan
position: fixed
kasing. Namun, ia tidak akan melaporkan unsur-unsur yang disembunyikan denganopacity: 0
atauvisibility: hidden
(tetapi tidak akanoffsetParent
).sumber
var isVisible = el => (r => r.width && r.height)(el.getBoundingClientRect());
. Kemudian saya dapat menyaring array dari elemen dengan cara berikut:$$(sel).filter(isVisible)
.Jadi apa yang saya temukan adalah metode yang paling layak:
Ini didasarkan pada fakta-fakta ini:
display: none
elemen (bahkan yang bersarang) tidak memiliki lebar atau tinggi.visiblity
adalahhidden
bahkan untuk elemen bersarang.Jadi tidak perlu untuk menguji
offsetParent
atau mengulang di pohon DOM untuk menguji yang orang tua milikivisibility: hidden
. Ini harus bekerja bahkan di IE 9.Anda bisa berargumen jika
opacity: 0
dan elemen yang runtuh (memiliki lebar tetapi tidak ada ketinggian - atau sebaliknya) juga tidak benar-benar terlihat. Tetapi sekali lagi mereka tidak per kata disembunyikan.sumber
Sedikit tambahan untuk jawaban ohad navon.
Jika pusat elemen milik elemen lain, kami tidak akan menemukannya.
Jadi untuk memastikan bahwa salah satu titik elemen ditemukan terlihat
sumber
Meningkatkan pada jawaban @Guy Messika di atas , melanggar dan mengembalikan false jika titik pusat 'X adalah <0 salah karena elemen sisi kanan dapat masuk ke tampilan. inilah perbaikannya:
sumber
Kode jQuery dari http://code.jquery.com/jquery-1.11.1.js memiliki param isHidden
Jadi sepertinya ada pemeriksaan tambahan terkait dengan dokumen pemilik
Saya ingin tahu apakah ini benar-benar menangkap kasus-kasus berikut:
sumber
Inilah kode yang saya tulis untuk menemukan satu-satunya yang terlihat di antara beberapa elemen serupa, dan mengembalikan nilai atribut "class" tanpa jQuery:
sumber
Inilah yang saya lakukan:
HTML & CSS: Membuat elemen disembunyikan secara default
JavaScript: Menambahkan kode untuk memeriksa apakah visibilitasnya tersembunyi atau tidak:
sumber
Ini adalah cara untuk menentukannya untuk semua properti css termasuk visibilitas:
html:
css:
javascript:
Ia bekerja untuk properti css dan sangat fleksibel dan dapat diandalkan.
sumber