Jadi ini jawabannya?
"Jika Anda perlu menghitung sesuatu tetapi tidak menunjukkannya, setel elemen ke visibility:hiddendanposition:absolute , tambahkan ke pohon DOM, dapatkan offsetHeight, dan hapus. (Itulah yang dilakukan perpustakaan prototipe di belakang garis saat terakhir kali saya memeriksa)."
Saya memiliki masalah yang sama pada sejumlah elemen. Tidak ada jQuery atau Prototipe untuk digunakan di situs tapi saya semua mendukung meminjam teknik jika berhasil. Sebagai contoh beberapa hal yang gagal berfungsi, diikuti oleh apa yang berhasil, saya memiliki kode berikut:
// Layout Height Get
function fnElementHeightMaxGet(DoScroll, DoBase, elementPassed, elementHeightDefault)
{
var DoOffset = true;
if (!elementPassed) { return 0; }
if (!elementPassed.style) { return 0; }
var thisHeight = 0;
var heightBase = parseInt(elementPassed.style.height);
var heightOffset = parseInt(elementPassed.offsetHeight);
var heightScroll = parseInt(elementPassed.scrollHeight);
var heightClient = parseInt(elementPassed.clientHeight);
var heightNode = 0;
var heightRects = 0;
//
if (DoBase) {
if (heightBase > thisHeight) { thisHeight = heightBase; }
}
if (DoOffset) {
if (heightOffset > thisHeight) { thisHeight = heightOffset; }
}
if (DoScroll) {
if (heightScroll > thisHeight) { thisHeight = heightScroll; }
}
//
if (thisHeight == 0) { thisHeight = heightClient; }
//
if (thisHeight == 0) {
// Dom Add:
// all else failed so use the protype approach...
var elBodyTempContainer = document.getElementById('BodyTempContainer');
elBodyTempContainer.appendChild(elementPassed);
heightNode = elBodyTempContainer.childNodes[0].offsetHeight;
elBodyTempContainer.removeChild(elementPassed);
if (heightNode > thisHeight) { thisHeight = heightNode; }
//
// Bounding Rect:
// Or this approach...
var clientRects = elementPassed.getClientRects();
heightRects = clientRects.height;
if (heightRects > thisHeight) { thisHeight = heightRects; }
}
//
// Default height not appropriate here
// if (thisHeight == 0) { thisHeight = elementHeightDefault; }
if (thisHeight > 3000) {
// ERROR
thisHeight = 3000;
}
return thisHeight;
}
yang pada dasarnya mencoba apa saja untuk mendapatkan hasil nol. ClientHeight tanpa pengaruh. Dengan elemen masalah saya biasanya mendapatkan NaN di Base dan nol di ketinggian Offset dan Scroll. Saya kemudian mencoba solusi Add DOM dan clientRects untuk melihat apakah itu berfungsi di sini.
29 Jun 2011, saya memang memperbarui kode untuk mencoba menambahkan DOM dan clientHeight dengan hasil yang lebih baik dari yang saya harapkan.
1) clientHeight juga 0.
2) Dom benar-benar memberi saya ketinggian yang hebat.
3) ClientRects mengembalikan hasil yang hampir identik dengan teknik DOM.
Karena elemen yang ditambahkan bersifat fluida, ketika mereka ditambahkan ke elemen DOM Temp yang sebaliknya kosong, elemen-elemen tersebut diberikan sesuai dengan lebar wadah itu. Ini jadi aneh, karena itu 30px lebih pendek daripada akhirnya.
Saya menambahkan beberapa foto untuk menggambarkan bagaimana ketinggian dihitung secara berbeda.
Perbedaan ketinggiannya jelas. Saya tentu saja dapat menambahkan posisi absolut dan tersembunyi tetapi saya yakin itu tidak akan berpengaruh. Saya terus diyakinkan bahwa ini tidak akan berhasil!
(Saya ngelantur lebih jauh) Ketinggian yang keluar (menjadikan) lebih rendah dari tinggi yang diberikan benar. Ini dapat diatasi dengan mengatur lebar elemen Temp DOM agar sesuai dengan induk yang ada dan dapat dilakukan secara cukup akurat dalam teori. Saya juga tidak tahu apa hasil dari menghapus mereka dan menambahkannya kembali ke lokasi mereka yang ada. Ketika mereka tiba melalui teknik innerHTML saya akan mencari menggunakan pendekatan yang berbeda ini.
* NAMUN * Tidak ada yang diperlukan. Bahkan itu berfungsi seperti yang diiklankan dan mengembalikan ketinggian yang benar !!!
Ketika saya bisa membuat menu terlihat lagi dengan luar biasa DOM telah mengembalikan ketinggian yang tepat per tata letak cairan di bagian atas halaman (279px). Kode di atas juga menggunakan getClientRects yang mengembalikan 280px.
Ini diilustrasikan dalam snapshot berikut (diambil dari Chrome sekali berfungsi.)
Sekarang saya tidak tahu mengapa trik prototipe itu berhasil, tetapi sepertinya begitu. Atau, getClientRects juga berfungsi.
Saya menduga penyebab semua masalah ini dengan elemen-elemen khusus ini adalah penggunaan innerHTML bukan appendChild, tapi itu adalah spekulasi murni pada titik ini.