Bagaimana Anda mendapatkan tinggi elemen yang diberikan?

Bagaimana Anda mendapatkan tinggi elemen yang diberikan?

Katakanlah Anda memiliki <div>elemen dengan beberapa konten di dalamnya. Konten ini di dalam akan meregangkan ketinggian <div>. Bagaimana Anda mendapatkan tinggi "yang diberikan" ketika Anda belum menetapkan ketinggian secara eksplisit. Jelas, saya mencoba:

var h = document.getElementById('someDiv').style.height;

Apakah ada trik untuk melakukan ini? Saya menggunakan jQuery jika itu membantu.

Seharusnya begitu

$('#someDiv').height();

dengan jQuery. Ini mengambil ketinggian item pertama dalam set yang dibungkus sebagai angka.

Mencoba menggunakan

.style.height

hanya berfungsi jika Anda telah menetapkan properti di tempat pertama. Sangat tidak berguna!

Coba salah satu dari:

var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;

clientHeight termasuk ketinggian dan bantalan vertikal.

offsetHeight termasuk ketinggian, bantalan vertikal, dan batas vertikal.

scrollHeight termasuk ketinggian dokumen yang terkandung (akan lebih besar dari sekadar tinggi jika terjadi pengguliran), bantalan vertikal, dan batas vertikal.

NON JQUERY karena ada banyak tautan yang digunakanelem.style.height di bagian atas jawaban ini ...

INNER HEIGHT:
https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight

document.getElementById(id_attribute_value).clientHeight;

HEAT OUTER:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight

document.getElementById(id_attribute_value).offsetHeight; 

Atau salah satu referensi favorit saya: http://youmightnotneedjquery.com/

Kamu bisa menggunakan .outerHeight() untuk tujuan ini.

Ini akan memberi Anda ketinggian elemen penuh. Anda juga tidak perlu mengatur css-heightelemen apa pun . Untuk berjaga-jaga, Anda dapat menjaga ketinggiannya secara otomatis sehingga dapat dirender sesuai ketinggian konten.

//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 tampilan yang jelas dari fungsi-fungsi ini Anda dapat pergi ke situs jQuery atau posting rinci di sini .

itu akan menghapus perbedaan antara .height()/ innerHeight()/outerHeight()

Saya menggunakan ini untuk mendapatkan ketinggian elemen (return float) :

document.getElementById('someDiv').getBoundingClientRect().height

Ini juga berfungsi ketika Anda menggunakan DOM virtual . Saya menggunakannya di Vue seperti ini:

this.$refs['some-ref'].getBoundingClientRect().height

style = window.getComputedStyle(your_element);

maka cukup: style.height

Pasti digunakan

$('#someDiv').height()   // to read it

atau

$('#someDiv').height(newHeight)  // to set it

Saya memposting ini sebagai jawaban tambahan karena ada beberapa hal penting yang baru saya pelajari.

Saya hampir jatuh ke dalam perangkap sekarang menggunakan offsetHeight. Inilah yang terjadi :

• Saya menggunakan trik lama yang bagus untuk menggunakan debugger untuk 'melihat' properti apa yang dimiliki elemen saya
• Saya melihat mana yang memiliki nilai di sekitar nilai yang saya harapkan
• Itu offsetHeight - jadi saya menggunakannya.
• Kemudian saya menyadari itu tidak bekerja dengan DIV tersembunyi
• Saya mencoba bersembunyi setelah menghitung maxHeight tapi itu tampak canggung - berantakan.
• Saya melakukan pencarian - menemukan jQuery.height () - dan menggunakannya
• menemukan ketinggian () berfungsi bahkan pada elemen tersembunyi
• hanya untuk bersenang-senang saya memeriksa implementasi jQuery tinggi / lebar

Ini hanya sebagian saja:

Math.max(
Math.max(document.body["scroll" + name], document.documentElement["scroll" + name]),
Math.max(document.body["offset" + name], document.documentElement["offset" + name])
) 

Yup itu terlihat pada KEDUA gulir dan offset. Jika gagal, akan terlihat lebih jauh, dengan mempertimbangkan peramban akun dan masalah kompatibilitas css. Dengan kata lain STUFF I DONT CARE ABOUT - atau mau.

Tapi saya tidak harus. Terima kasih jQuery!

Moral dari cerita: jika jQuery memiliki metode untuk sesuatu itu mungkin karena alasan yang baik, kemungkinan terkait dengan kompatibilitas.

Jika Anda belum membaca daftar metode jQuery baru-baru ini saya sarankan Anda melihatnya.

document.querySelector('.project_list_div').offsetHeight;

Saya membuat kode sederhana yang bahkan tidak perlu JQuery dan mungkin akan membantu beberapa orang. Ia mendapatkan tinggi total 'ID1' setelah dimuat dan menggunakannya pada 'ID2'

function anyName(){
    var varname=document.getElementById('ID1').offsetHeight;
    document.getElementById('ID2').style.height=varname+'px';
}

Kemudian atur saja tubuh untuk memuatnya

<body onload='anyName()'>

Hm kita bisa mendapatkan geometri Elemen ...

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 dengan JS polos ini?

Saya pikir cara terbaik untuk melakukan ini pada tahun 2020 adalah dengan menggunakan js dan getBoundingClientRect().height;

Ini sebuah contoh

let div = document.querySelector('div');
let divHeight = div.getBoundingClientRect().height;

console.log(`Div Height: ${divHeight}`);

<div>
  How high am I? 🥴
</div>

Selain mendapatkan heightcara ini, kami juga memiliki akses ke banyak hal lain tentang div.

let div = document.querySelector('div');
let divInfo = div.getBoundingClientRect();

console.log(divInfo);

<div>What else am I? 🥴</div>

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.

offsetHeight, biasanya.

Jika Anda perlu menghitung sesuatu tetapi tidak menunjukkannya, setel elemen ke visibility:hiddendan position:absolute, tambahkan ke pohon DOM, dapatkan offsetHeight, dan hapus. (Itulah yang dilakukan perpustakaan prototipe di belakang layar terakhir kali saya periksa).

Terkadang offsetHeight akan mengembalikan nol karena elemen yang Anda buat belum dirender di Dom. Saya menulis fungsi ini untuk keadaan seperti itu:

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 sudah menggunakan jQuery, taruhan terbaik Anda adalah .outerHeight()atau.height() , seperti yang telah dinyatakan.

Tanpa jQuery, Anda dapat mencentang ukuran kotak yang digunakan dan menambahkan berbagai bantalan + batas + clientHeight, atau Anda dapat menggunakan getComputedStyle :

var h = getComputedStyle (document.getElementById ('someDiv')). height;

h sekarang akan menjadi string seperti "53.825px".

Dan saya tidak dapat menemukan referensi, tapi saya pikir saya dengar getComputedStyle()bisa mahal, jadi itu mungkin bukan sesuatu yang ingin Anda panggil pada setiap window.onscrollacara (tapi kemudian, tidak juga jQuery height()).

Dengan Mootools :

$('someDiv').getSize().y

Jika saya memahami 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');
    } 
}

Sudahkah Anda mengatur ketinggian di css secara spesifik? Jika belum, Anda harus menggunakan offsetHeight;daripadaheight

var h = document.getElementById('someDiv').style.offsetHeight;