Ada beberapa metode bagi JS untuk mendapatkan lebar dan tinggi elemen tersembunyi di internet, tetapi mungkin ada beberapa situasi yang tidak dapat diperoleh.
Misalnya:
<! Doctype html> <html lang = "en"> <head> <meta http-equiv = "konten tipe" content = "text/html; charset = utf-8"/> <title> tes </ title> </head> <body> <v ID = "test" style = "Display: None"> Saya memiliki pot anggur. Semua sungai dan laut dituangkan ke sungai dan laut, dan mereka diberikan kepada orang -orang di dunia. </div> <div id = "test2" style = "display: none"> <div style = "display: none"> <div id = "test2_child"> Saya punya pot anggur yang cukup untuk menghibur debu. Semua sungai dan laut dituangkan ke sungai dan laut, dan mereka diberikan kepada orang -orang di dunia. </div> </div> </div> <div id = "test3"> <Div> <div id = "test3_child"> Saya memiliki pot anggur yang cukup untuk menghibur debu. Semua sungai dan laut dituangkan ke sungai dan laut, dan mereka diberikan kepada orang -orang di dunia. </div> </div> </div> </div> </body> </html>
Tes dapat diperoleh, tetapi test2_child tidak dapat diperoleh. Mengingat situasi ini, saya menulis metode untuk menyelesaikannya sendiri.
Larutan:
1. Dapatkan elemen (ambil lebar dan tinggi) semua elemen leluhur tersembunyi sampai elemen tubuh, termasuk Anda.
2. Dapatkan properti tampilan dan visibilitas dari semua elemen tersembunyi dan simpan.
3. Atur semua elemen tersembunyi ke visibilitas: tersembunyi; tampilan: blokir! Penting; (Alasan penting adalah untuk menghindari prioritas yang tidak mencukupi).
4. Dapatkan lebar dan tinggi elemen (ambil lebar dan tinggi).
5. Kembalikan properti tampilan dan visibilitas dari gaya semua elemen tersembunyi.
6. Mengembalikan nilai lebar dan tinggi elemen.
Implementasi Kode:
function getSize (id) {var width, height, elem = document.geteLementById (id), nonenode = [], nodestyle = []; getNonenode (elem); // Dapatkan elemen tampilan multi-lapis: tidak ada; setNodestyle (); lebar = elem.clientwidth; tinggi = elem.clientHeight; resumenodestyle (); return {width: width, height: height} function getNonEnode (node) {var display = getStyles (node) .getPropertyValue ('display'), tagName = node.nodename.tolowercase (); if (display! = 'none' && tagname! = 'body') {getNonEnode (node.parentNode); } else {nonenodes.push (node); if (tagname! = 'body') getNonEnode (node.parentnode); }} // Metode ini bisa mendapatkan apakah ada pengaturan properti tampilan akhir, dan tidak bisa style.display. function getStyles (elem) {// dukungan: yaitu <= 11+, firefox <= 30+ ( #15098, #14150) // IE melempar pada elemen yang dibuat dalam popup // ff sementara itu melempar elemen bingkai melalui "defaultview.getComputedStyle" var view = elem.Ownerdocument. if (! view ||! view.opener) {view = window; } return view.getComputedStyle (elem); }; fungsi setNodestyle () {var i = 0; untuk (; i <nonenode.length; i ++) {var visibilitas = nonenode [i] .style.visibility, display = nonenode [i] .style.display, style = nonenode [i] .getattribute ("style"); // Timpa gaya tampilan lainnya nonenode [i] .setAttribute ("style", "Visibilitas: tersembunyi; tampilan: blok! Penting;" + style); nodestyle [i] = {visibilitas: visibilitas, display: display}}} fungsi resumenodestyle () {var i = 0; untuk (; i <nonenodes.length; i ++) {nonenode [i] .style.visibility = nodestyle [i] .visibility; nonenode [i] .style.display = nodestyle [i] .display; }}}Contoh demonstrasi:
var testsize = getSize ('test'); console.log ("test-> width:" + testsize.width + "tinggi:" + testSize.height); var test2childsize2 = getSize ('test2_child'); console.log ("test2child2-> width:" + test2child '); console.log ("test2child2-> width:" + test2child'); console.log ("test2child2-> width:" + test2Child test2childsize2.height); var test3childsize = getSize ('test3_child'); console.log ("test3_child-> lebar:" + test3childsize.width + "tinggi:" + test3childsize.height); // Nilai cetak adalah sebagai berikut Test-> Lebar: 417 Tinggi: 18Test2Child2-> Lebar: 417 Tinggi: 18Test3_Child-> Lebar: 417 Tinggi: 18Catatan:
1. Buka Tampilkan Semua Elemen Leluhur Tersembunyi dan Dapatkan Lebar dan Nilai Tinggi Elemen. Dalam beberapa kasus, mungkin salah untuk mendapatkan nilainya.
PS: Tapi jangan khawatir tentang ini, cukup retas metode ketika ada sesuatu yang salah.
2. Alasan mengapa elemen leluhur tersembunyi ditampilkan dan atribut visibilitas harus diatur kembali nanti tanpa mempengaruhi dirinya sendiri.
3. Selain itu, metode GetStyles diekstraksi dari kode sumber jQuery, sehingga metode ini dapat memperoleh apakah ada pengaturan atribut tampilan akhir.
PS: Tidak dapat diperoleh dari style.display.
Metode di atas untuk mendapatkan elemen tersembunyi di JS adalah semua konten yang dibagikan oleh editor. Saya harap ini dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.