Bagaimana anda mendapatkan diberikan tinggi dari suatu elemen?
Let's mengatakan anda memiliki <div>
elemen dengan beberapa isi di dalamnya. Ini isi di dalamnya akan meregangkan ketinggian <div>
. Bagaimana anda mendapatkan "diberikan" tinggi ketika anda ingin't secara eksplisit mengatur ketinggian. Jelas, saya mencoba:
var h = document.getElementById('someDiv').style.height;
Apakah ada trik untuk melakukan hal ini? Saya menggunakan jQuery jika itu membantu.
Cobalah salah satu dari:
var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;
clientHeight
termasuk tinggi dan vertikal bantalan.
offsetHeight
termasuk tinggi, vertikal padding, dan vertikal perbatasan.
scrollHeight
termasuk ketinggian yang terkandung dokumen (akan lebih besar dari hanya tinggi dalam hal scrolling), vertikal padding, dan vertikal perbatasan.
Itu hanya harus
$('#someDiv').height();
dengan jQuery. Ini mengambil ketinggian item pertama dalam dibungkus ditetapkan sebagai nomor.
Mencoba untuk menggunakan
.style.height
hanya bekerja jika anda telah mengatur properti di tempat pertama. Tidak sangat berguna!
NON JQUERY karena ada banyak link menggunakan elem.gaya.ketinggian
di bagian atas jawaban-jawaban ini...
BATIN TINGGI: https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight
document.getElementById(id_attribute_value).clientHeight;
LUAR TINGGI: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight
document.getElementById(id_attribute_value).offsetHeight;
Atau salah satu favorit saya referensi: http://youmightnotneedjquery.com/
Anda dapat menggunakan .outerHeight()
untuk tujuan ini.
Ini akan memberi anda penuh yang diberikan tinggi dari elemen. Juga, anda don't perlu untuk mengatur css-tinggi
dari elemen. Untuk pencegahan anda dapat menjaga ketinggian auto sehingga dapat diberikan untuk setiap konten yang's tinggi.
//if you need height of div excluding margin/padding/border
$('#someDiv').height();
//if you need height of div with padding but without border + margin
$('#someDiv').innerHeight();
// if you need height of div including padding and border
$('#someDiv').outerHeight();
//and at last for including border + margin + padding, can use
$('#someDiv').outerHeight(true);
Untuk pandangan yang jelas dari fungsi ini anda dapat pergi untuk jQuery's situs atau rinci posting di sini.
hal itu akan jelas perbedaan antara.ketinggian()
/ innerHeight()
/ outerHeight()
Saya menggunakan ini:
document.getElementById('someDiv').getBoundingClientRect().height
Ia juga bekerja ketika anda menggunakan virtual DOM. Saya menggunakannya di Vue seperti ini:
this.$refs['some-ref'].getBoundingClientRect().height
Pasti menggunakan
$('#someDiv').height() // to read it
atau
$('#someDiv').height(newHeight) // to set it
I'm postingan ini sebagai jawaban tambahan karena ada beberapa hal penting yang saya pelajari.
Aku hampir jatuh ke dalam perangkap hanya sekarang menggunakan offsetHeight. Ini adalah apa yang terjadi :
Berikut ini's hanya bagian dari itu :
Math.max(
Math.max(document.body["scroll" + name], document.documentElement["scroll" + name]),
Math.max(document.body["offset" + name], document.documentElement["offset" + name])
)
Yup ini terlihat pada KEDUA gulir dan offset. Jika gagal itu terlihat bahkan lebih, dengan mempertimbangkan browser dan masalah kompatibilitas css. Dengan kata lain hal-HAL yang aku NGGAK PEDULI - atau ingin.
Tapi saya tidak perlu. Terima kasih jQuery!
Moral dari cerita ini : jika jQuery memiliki metode untuk sesuatu yang mungkin untuk alasan yang baik, besar kemungkinan terkait dengan kompatibilitas.
Jika anda belum't baca melalui jQuery daftar metode baru-baru ini saya sarankan anda mengambil melihat-lihat.
Saya membuat kode sederhana yang doesn't bahkan perlu JQuery dan mungkin akan membantu beberapa orang. Ia mendapat total ketinggian 'ID1' setelah dimuat dan menggunakannya pada 'ID2'
function anyName(){
var varname=document.getElementById('ID1').offsetHeight;
document.getElementById('ID2').style.height=varname+'px';
}
Kemudian hanya mengatur tubuh untuk beban itu
<body onload='anyName()'>
Hm, kita bisa mendapatkan Elemen geometri...
var geometry;
geometry={};
var element=document.getElementById(#ibims);
var rect = element.getBoundingClientRect();
this.geometry.top=rect.top;
this.geometry.right=rect.right;
this.geometry.bottom=rect.bottom;
this.geometry.left=rect.left;
this.geometry.height=this.geometry.bottom-this.geometry.top;
this.geometry.width=this.geometry.right-this.geometry.left;
console.log(this.geometry);
Bagaimana tentang hal ini polos JS ?
Jadi apakah ini jawabannya?
"Jika anda perlu untuk menghitung sesuatu tetapi tidak menunjukkan hal itu, mengatur elemen untuk visibility:hidden
dan posisi:absolut
, tambahkan ke dalam DOM tree, mendapatkan offsetHeight, dan menghapusnya. (Yang's apa prototipe perpustakaan tidak di belakang garis terakhir kali saya diperiksa)."
Saya memiliki masalah yang sama pada sejumlah elemen. Tidak ada jQuery atau Prototipe yang akan digunakan pada situs tapi aku'm semua mendukung pinjaman teknik jika bekerja. Sebagai contoh dari beberapa hal yang gagal untuk bekerja, diikuti oleh apa, saya punya 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 dan segala sesuatu hanya untuk mendapatkan hasil nol. ClientHeight dengan tidak mempengaruhi. Dengan masalah unsur-unsur yang biasanya saya dapatkan NaN di Dasar dan nol Offset dan Gulir heights. Saya kemudian mencoba Menambahkan DOM solusi dan clientRects untuk melihat apakah itu bekerja di sini.
29 Jun 2011, Aku memang update kode untuk mencoba kedua menambah DOM dan clientHeight dengan hasil yang lebih baik dari yang saya harapkan.
clientHeight adalah juga 0.
Dom benar-benar memberi saya ketinggian yang besar.
ClientRects mengembalikan hasil yang hampir identik dengan DOM teknik.
Karena unsur-unsur yang ditambahkan adalah cairan di alam, ketika mereka ditambahkan ke kosong jika tidak DOM Temp elemen mereka diberikan sesuai dengan lebar dari wadah itu. Ini menjadi aneh, karena itu adalah 30px lebih pendek dari itu akhirnya berakhir.
Saya menambahkan beberapa foto yang menggambarkan bagaimana ketinggian dihitung secara berbeda.
Perbedaan tinggi yang jelas. Aku pasti bisa menambah posisi absolut dan tersembunyi, namun saya yakin bahwa tidak akan berpengaruh. Aku terus yakin ini tidak akan bekerja!
(Saya ngelantur lebih jauh) ketinggian keluar (membuat) lebih rendah dari kenyataan yang diberikan tinggi. Hal ini bisa diatasi dengan mengatur lebar dari DOM Temp elemen untuk pertandingan yang ada orangtua dan bisa dilakukan dengan cukup akurat dalam teori. Saya juga tidak tahu apa yang akan dihasilkan dari menghapus mereka dan menambahkan mereka kembali ke lokasi yang sudah ada. Saat mereka tiba melalui innerHTML teknik saya akan menggunakan pendekatan yang berbeda.
NAMUN Tidak ada yang diperlukan. Sebenarnya ini bekerja sebagai diiklankan dan kembali ketinggian yang benar!!!
Ketika saya mampu untuk mendapatkan menu terlihat lagi luar biasa DOM telah kembali ketinggian yang benar sesuai dengan tata letak cairan di bagian atas halaman (279px). Kode di atas juga menggunakan getClientRects yang kembali 280px.
Hal ini digambarkan sebagai berikut snapshot (diambil dari Chrome setelah bekerja.)
Sekarang saya memiliki noooooo tahu mengapa bahwa prototipe trik bekerja, tetapi tampaknya. Atau, getClientRects juga bekerja.
Saya menduga penyebab dari semua masalah ini dengan unsur-unsur tertentu adalah penggunaan innerHTML bukan appendChild, tapi itu adalah murni spekulasi pada saat ini.
offsetHeight
, biasanya.
Jika anda perlu untuk menghitung sesuatu tetapi tidak menunjukkan hal itu, mengatur elemen untuk visibility:hidden
dan posisi:absolut
, tambahkan ke dalam DOM tree, mendapatkan offsetHeight
, dan menghapus itu. (Yang's apa prototipe perpustakaan tidak balik adegan terakhir kali saya diperiksa).
Kadang-kadang offsetHeight akan kembali nol karena elemen anda've dibuat belum diberikan dalam Dom belum. Saya menulis ini berfungsi untuk keadaan seperti:
function getHeight(element)
{
var e = element.cloneNode(true);
e.style.visibility = "hidden";
document.body.appendChild(e);
var height = e.offsetHeight + 0;
document.body.removeChild(e);
e.style.visibility = "visible";
return height;
}
Jika anda menggunakan jQuery sudah, anda bertaruh terbaik adalah .outerHeight()
atau .ketinggian()
, seperti yang telah dinyatakan.
Tanpa jQuery, anda dapat memeriksa box-sizing dalam menggunakan dan menambahkan berbagai bantalan + batas + clientHeight, or anda dapat menggunakan getComputedStyle:
var jam = getComputedStyle(dokumen.getElementById('someDiv')).tinggi;
h
sekarang akan menjadi sebuah string seperti "53.825 px".
Dan saya dapat't menemukan referensi, tapi saya pikir saya mendengar getComputedStyle()
dapat menjadi mahal, sehingga's mungkin tidak sesuatu yang anda inginkan untuk memanggil masing-masing jendela.onscroll
acara (tapi kemudian, tidak jQuery's height()
).
Jika saya mengerti pertanyaan anda dengan benar, maka mungkin sesuatu seperti ini akan membantu:
function testDistance(node1, node2) {
/* get top position of node 1 */
let n1Pos = node1.offsetTop;
/* get height of node 1 */
let n1Height = node1.clientHeight;
/* get top position of node 2 */
let n2Pos = node2.offsetTop;
/* get height of node 2 */
let n2Height = node2.clientHeight;
/* add height of both nodes */
let heightTogether = n1Height + n2Height;
/* calculate distance from top of node 1 to bottom of node 2 */
let actualDistance = (n2Pos + n2Height) - n1Pos;
/* if the distance between top of node 1 and bottom of node 2
is bigger than their heights combined, than there is something between them */
if (actualDistance > heightTogether) {
/* do something here if they are not together */
console.log('they are not together');
} else {
/* do something here if they are together */
console.log('together');
}
}