Bir elemanın işlenen yüksekliğini nasıl elde edersiniz?

Bir elemanın işlenen yüksekliğini nasıl elde edersiniz?

<div>İçinde bazı içerikler bulunan bir öğeniz olduğunu varsayalım . İçerideki bu içerik yüksekliğini artıracak <div>. Yüksekliği açıkça ayarlamadığınızda "oluşturulan" yüksekliği nasıl elde edersiniz? Açıkçası denedim:

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

Bunu yapmak için bir hile var mı? Bu yardımcı olur jQuery kullanıyorum.

Sadece olmalı

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

jQuery ile. Bu, sarılmış kümedeki ilk öğenin yüksekliğini sayı olarak alır.

Kullanmaya çalışmak

.style.height

yalnızca özelliği ilk etapta ayarladıysanız çalışır. Çok faydalı değil!

Şunlardan birini deneyin:

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

clientHeight yükseklik ve dikey dolgu içerir.

offsetHeight yükseklik, dikey dolgu ve dikey kenarlıkları içerir.

scrollHeight içerdiği belgenin yüksekliğini (kaydırma durumunda yalnızca yükseklikten daha büyük olacaktır), dikey dolgu ve dikey kenarlıkları içerir.

JQUERY OLMADI çünkü elem.style.heightbu cevapların üstünde bir sürü bağlantı var ...

İÇ YÜKSEKLİK:
https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight

document.getElementById(id_attribute_value).clientHeight;

DIŞ YÜKSEKLİK:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight

document.getElementById(id_attribute_value).offsetHeight; 

Ya da en sevdiğim referanslardan biri: http://youmightnotneedjquery.com/

.outerHeight()Bu amaçla kullanabilirsiniz .

Size elemanın tam olarak işlenmiş yüksekliğini verecektir. Ayrıca, herhangi bir css-heightöğeyi ayarlamanız gerekmez . Önlem için yüksekliğini otomatik tutabilirsiniz, böylece içeriğin yüksekliğine göre işlenebilir.

//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);

Bu işlevi net bir şekilde görmek için jQuery'nin sitesine veya ayrıntılı bir gönderiye buradan gidebilirsiniz .

o temizleyecektir farkı arasındaki .height()/ innerHeight()/outerHeight()

Bir elemanın yüksekliği (float döner) elde etmek için bunu kullanın :

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

Sanal DOM kullandığınızda da çalışır . Ben Vue böyle kullanın:

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

style = window.getComputedStyle(your_element);

o zaman basitçe: style.height

Kesinlikle kullanın

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

veya

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

Bunu ek bir cevap olarak gönderiyorum çünkü öğrendiğim birkaç önemli şey var.

Hemen hemen offsetHeight kullanarak tuzağa düştüm. Olan şey bu :

• Öğemin sahip olduğu özellikleri izlemek için bir hata ayıklayıcı kullanmanın eski hilesini kullandım
• Hangisinin beklediğim değerin etrafında bir değeri olduğunu gördüm
• OfsetHeight - bu yüzden kullandım.
• Sonra gizli bir DIV ile işe yaramadı fark
• MaxHeight'ı hesapladıktan sonra saklanmayı denedim ama bu beceriksiz görünüyordu - bir karmaşa içinde.
• Bir arama yaptım - jQuery.height () keşfetti ve kullandım
• yüksekliği bulmak () gizli elemanlarda bile çalışır
• sadece eğlence için yükseklik / genişlik jQuery uygulamasını kontrol ettim

İşte bunun bir kısmı:

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

Evet, İKİ kaydırma ve ofsete bakar. Bu başarısız olursa, tarayıcı ve css uyumluluk sorunlarını dikkate alarak daha da fazla görünüyor. Başka bir deyişle STUFF I CARO HAKKINDA - ya da istiyorum.

Ama zorunda değilim. Teşekkürler jQuery!

Hikayenin ahlakı: jQuery'nin bir şey için bir yöntemi varsa, muhtemelen iyi bir nedenden ötürü, muhtemelen uyumlulukla ilgilidir.

Son zamanlarda jQuery yöntem listesini okumadıysanız, bir göz atmanızı öneririm.

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

JQuery'ye bile ihtiyaç duymayan basit bir kod yaptım ve muhtemelen bazı insanlara yardım edeceğim. Yüklendikten sonra toplam 'ID1' yüksekliğini alır ve 'ID2' üzerinde kullanır

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

Sonra sadece vücudu yükleyecek şekilde ayarlayın

<body onload='anyName()'>

Hm Element geometrisini alabiliriz ...

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);

Peki ya bu düz JS?

Bunu 2020'de yapmanın en iyi yolunun düz js ve getBoundingClientRect().height;

İşte bir örnek

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

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

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

heightBu şekilde elde etmenin yanı sıra, hakkında bir sürü başka öğeye de erişebiliriz div.

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

console.log(divInfo);

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

Peki bu cevap mı?

"Bir şeyi hesaplamanız gerekiyor, ancak göstermiyorsanız, öğeyi visibility:hiddenve olarak ayarlayın, position:absoluteDOM ağacına ekleyin, offsetHeight'ı alın ve kaldırın. (Prototip kütüphanesi son kontrol ettiğim satırların arkasında bunu yapar)."

Aynı sorun bir dizi unsurda da var. Sitede kullanılacak jQuery veya Prototype yok ama eğer işe yararsa tekniği ödünç almaktan yanayım. Çalışamayan bazı şeylerin bir örneği olarak, ardından ne yaptı, ben aşağıdaki kodu var:

// 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;
}

temelde her şeyi dener ve sadece sıfır sonuç almak için her şeyi dener. Etkisi olmayan ClientHeight. Sorunlu elemanlarla tipik olarak Tabanda NaN, Ofset ve Kaydırma yüksekliklerinde sıfır elde ederim. Daha sonra burada çalışıp çalışmadığını görmek için DOM çözümü ve clientRects ekle denedim.

29 Haz 2011, gerçekten DOM ve clientHeight eklemeyi beklediğimden daha iyi sonuçlarla eklemek için kodu güncelledim.

1) clientHeight da 0 idi.

2) Dom aslında bana büyük bir yükseklik verdi.

3) ClientRects, DOM tekniğiyle neredeyse aynı sonucu döndürür.

Eklenen elemanlar doğada akışkan olduklarından, aksi takdirde boş bir DOM Temp elemanına eklendiğinde, bu kabın genişliğine göre oluşturulurlar. Bu garipleşiyor, çünkü sonunda 30 piksel daha kısa.

Yüksekliğin nasıl farklı hesaplandığını göstermek için birkaç anlık görüntü ekledim.

Yükseklik farkları açıktır. Kesinlikle mutlak konumlandırma ve gizli ekleyebilirim ama bunun bir etkisi olmayacağından eminim. Bunun işe yaramayacağına ikna olmaya devam ettim!

(Daha fazla inceliyorum) Yükseklik gerçek görüntülenen yükseklikten daha düşük çıkıyor (çıkıyor). Bu, DOM Temp öğesinin genişliği mevcut üst öğeyle eşleşecek şekilde ayarlanarak ele alınabilir ve teoride oldukça doğru bir şekilde yapılabilir. Ayrıca bunları kaldırıp mevcut konumlarına geri eklemekten ne elde edeceğimi de bilmiyorum. Bir innerHTML tekniği ile geldiklerinde bu farklı yaklaşımı kullanarak bakacağım.

* ANCAK * Hiçbiri gerekli değildi. Aslında reklamı olarak çalıştı ve doğru yüksekliği döndü !!!

Menüleri tekrar şaşırtıcı bir şekilde görünür hale getirebildiğimde, DOM sayfanın üstündeki sıvı düzeni başına doğru yüksekliği döndürmüştü (279 piksel). Yukarıdaki kod ayrıca 280 piksel döndüren getClientRects kullanır.

Bu, aşağıdaki anlık görüntüde gösterilmiştir (çalıştıktan sonra Chrome'dan alınır.)

Şimdi bu prototip hilesinin neden işe yaradığına dair hiçbir fikrim yok, ama öyle görünüyor. Alternatif olarak, getClientRects de çalışır.

Tüm bu sorunların nedeninin bu belirli unsurlarla nedeninin appendChild yerine innerHTML kullanımı olduğundan şüpheleniyorum, ancak bu noktada saf spekülasyon.

offsetHeight, genelde.

Bir şeyi hesaplamanız gerekiyor, ancak göstermiyorsanız, öğeyi visibility:hiddenve olarak ayarlayın position:absolute, DOM ağacına ekleyin, alın offsetHeightve kaldırın. (Prototip kütüphanesinin en son kontrol ettiğimde sahne arkasında yaptığı şey budur).

Oluşturduğunuz öğe henüz Dom'da oluşturulmadığı için bazen offsetHeight sıfır döndürür. Bu işlevi bu tür durumlar için yazdım:

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;
}

Zaten jQuery kullanıyorsanız, en iyi bahsiniz .outerHeight()veya .height()belirtildiği gibi.

JQuery olmadan, kullanımda kutu boyutlandırmasını kontrol edebilir ve çeşitli dolgular + kenarlıklar + clientHeight ekleyebilirsiniz veya getComputedStyle'ı kullanabilirsiniz :

var h = getComputedStyle (document.getElementById ('someDiv')). yükseklik;

h artık "53.825 piksel" gibi bir dize olacaktır.

Ve referans bulamıyorum, ancak getComputedStyle()pahalı olabileceğini duydum , bu yüzden muhtemelen her window.onscrollolayda aramak istediğiniz bir şey değil (ama o zaman, ikisi de jQuery's height()).

İle mooTools :

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

Sorunuzu doğru anladıysam, belki böyle bir şey yardımcı olacaktır:

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

Özellikle css'deki yüksekliği ayarladınız mı? Eğer kullanmadıysanız kullanmak offsetHeight;yerineheight

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