คุณจะได้ความสูงที่แสดงขององค์ประกอบได้อย่างไร

คุณจะได้ความสูงที่แสดงขององค์ประกอบได้อย่างไร

สมมติว่าคุณมี<div>องค์ประกอบพร้อมเนื้อหาภายใน <div>นี้ภายในเนื้อหาเป็นไปเพื่อยืดความสูงของ คุณจะรับความสูง "ที่เรนเดอร์" ได้อย่างไรเมื่อคุณไม่ได้ตั้งค่าความสูงอย่างชัดเจน เห็นได้ชัดว่าฉันพยายาม:

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

มีเคล็ดลับในการทำเช่นนี้หรือไม่? ฉันใช้ jQuery ถ้าช่วยได้

มันควรจะเป็น

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

ด้วย jQuery สิ่งนี้จะดึงความสูงของรายการแรกในชุดที่ห่อเป็นตัวเลข

พยายามใช้

.style.height

ใช้งานได้เฉพาะถ้าคุณได้ตั้งค่าคุณสมบัติในสถานที่แรก ไม่มีประโยชน์มาก!

ลองหนึ่งใน:

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

clientHeight รวมถึงความสูงและระยะห่างแนวดิ่ง

offsetHeight รวมถึงความสูงการแพ็ดตามแนวตั้งและเส้นขอบแนวตั้ง

scrollHeight รวมความสูงของเอกสารที่มี (จะสูงกว่าความสูงในกรณีของการเลื่อน) การขยายแนวตั้งและเส้นขอบแนวตั้ง

NON JQUERY เนื่องจากมีลิงก์จำนวนมากที่ใช้elem.style.heightในคำตอบด้านบน ...

ความสูงภายใน:
https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight

document.getElementById(id_attribute_value).clientHeight;

ความสูงภายนอก:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight

document.getElementById(id_attribute_value).offsetHeight; 

หรือหนึ่งในการอ้างอิงที่ฉันชอบ: http://youmightnotneedjquery.com/

คุณสามารถใช้ได้ .outerHeight()เพื่อวัตถุประสงค์นี้

มันจะให้ความสูงที่แสดงเต็มขององค์ประกอบ นอกจากนี้คุณไม่จำเป็นต้องตั้งค่าcss-heightองค์ประกอบใด ๆ เพื่อความไม่ประมาทคุณสามารถรักษาระดับความสูงโดยอัตโนมัติเพื่อให้สามารถแสดงผลตามความสูงของเนื้อหา

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

สำหรับมุมมองที่ชัดเจนของฟังก์ชันเหล่านี้คุณสามารถไปที่ไซต์ของ jQuery หรือโพสต์แบบละเอียดที่นี่โพสต์รายละเอียดที่นี่

มันจะล้างความแตกต่างระหว่าง.height()/ innerHeight()/outerHeight()

ฉันใช้สิ่งนี้เพื่อให้ได้ความสูงขององค์ประกอบ(return float) :

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

นอกจากนี้ยังทำงานเมื่อคุณใช้DOM เสมือน ฉันใช้มันใน Vue เช่นนี้:

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

style = window.getComputedStyle(your_element);

แล้วก็: style.height

ใช้อย่างแน่นอน

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

หรือ

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

ฉันโพสต์สิ่งนี้เป็นคำตอบเพิ่มเติมเนื่องจากมีสิ่งสำคัญสองสามอย่างที่ฉันเพิ่งเรียนรู้

ตอนนี้ฉันเกือบจะตกหลุมพรางแล้ว นี่คือสิ่งที่เกิดขึ้น:

• ฉันใช้กลอุบายเก่า ๆ ที่ดีในการใช้ดีบักเกอร์เพื่อ 'ดู' คุณสมบัติที่องค์ประกอบของฉันมี
• ฉันเห็นสิ่งที่มีค่าประมาณค่าที่ฉันคาดหวัง
• มันถูกชดเชยความสูง - ดังนั้นฉันจึงใช้มัน
• จากนั้นฉันก็รู้ว่ามันไม่ได้ทำงานกับ DIV ที่ซ่อนอยู่
• ฉันพยายามซ่อนหลังจากคำนวณ maxHeight แต่มันดูเงอะงะ - มีระเบียบ
• ฉันค้นหา - ค้นพบ jQuery.height () - และใช้มัน
• พบความสูง () ทำงานได้แม้ในองค์ประกอบที่ซ่อนอยู่
• เพียงเพื่อความสนุกฉันตรวจสอบการใช้ jQuery ของความสูง / ความกว้าง

นี่เป็นเพียงส่วนหนึ่งของมัน:

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

ใช่มันดูทั้งการเลื่อนและการชดเชย หากล้มเหลวมันดูยิ่งขึ้นโดยคำนึงถึงเบราว์เซอร์บัญชีและ css ปัญหาความเข้ากันได้ ในคำอื่น ๆ สิ่งที่ฉันไม่สนใจเกี่ยวกับ - หรือต้องการ

แต่ฉันไม่จำเป็นต้อง ขอบคุณ jQuery!

คุณธรรมของเรื่องราว: หาก jQuery มีวิธีการสำหรับบางสิ่งบางอย่างมันอาจจะมีเหตุผลที่ดีซึ่งอาจเกี่ยวข้องกับความเข้ากันได้

หากคุณยังไม่ได้อ่านรายการวิธีการjQueryเมื่อเร็ว ๆ นี้ฉันขอแนะนำให้คุณดู

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

ฉันสร้างรหัสง่ายๆที่ไม่จำเป็นต้องใช้ JQuery และอาจช่วยคนอื่นได้ จะได้รับความสูงรวมของ 'ID1' หลังจากโหลดและใช้กับ 'ID2'

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

จากนั้นเพียงแค่ตั้งค่าร่างกายให้โหลด

<body onload='anyName()'>

หืมเราสามารถรับรูปทรงเรขาคณิตขององค์ประกอบ ...

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

แล้ว JS แบบธรรมดาล่ะ?

ฉันคิดว่าวิธีที่ดีที่สุดในการทำเช่นนี้ในปี 2020 คือใช้ js ธรรมดาและ getBoundingClientRect().height;

นี่คือตัวอย่าง

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

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

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

ด้านบนของการเดินทางheightด้วยวิธีนี้เรายังมีการเข้าถึงพวงของสิ่งอื่น ๆ divเกี่ยวกับการ

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

console.log(divInfo);

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

ดังนั้นนี่คือคำตอบ?

ถ้าคุณต้องการคำนวณบางอย่าง แต่ไม่แสดงให้ตั้งค่าองค์ประกอบเป็นvisibility:hiddenและposition:absoluteเพิ่มลงในทรี DOM รับ offsetHeight และลบออก (นั่นคือสิ่งที่ไลบรารีต้นแบบทำอยู่หลังบรรทัดสุดท้ายที่ฉันตรวจสอบ)"

ฉันมีปัญหาเดียวกันกับองค์ประกอบหลายอย่าง ไม่มี jQuery หรือ Prototype ที่จะใช้บนเว็บไซต์ แต่ฉันทุกคนชอบที่จะยืมเทคนิคถ้ามันใช้งานได้ ตัวอย่างของบางสิ่งที่ล้มเหลวในการทำงานตามด้วยสิ่งที่ทำฉันมีรหัสต่อไปนี้:

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

ซึ่งโดยทั่วไปจะพยายามทำทุกอย่างเพื่อให้ได้ผลลัพธ์เป็นศูนย์ ความสูงของลูกค้าที่ไม่มีผลกระทบ ด้วยองค์ประกอบของปัญหาฉันมักจะได้ NaN ในฐานและศูนย์ในระดับความสูงออฟเซ็ตและสโคร ฉันลองใช้โซลูชันเพิ่ม DOM และ clientRects เพื่อดูว่าทำงานได้ที่นี่หรือไม่

29 มิ.ย. 2011 ฉันได้ทำการปรับปรุงรหัสเพื่อลองทั้งการเพิ่มใน DOM และ clientHeight ด้วยผลลัพธ์ที่ดีกว่าที่ฉันคาดไว้

1) ลูกค้าความสูงเป็น 0

2) Dom ให้ความสูงแก่ฉันซึ่งเยี่ยมมาก

3) ClientRects ส่งคืนผลลัพธ์ที่เกือบจะเหมือนกับเทคนิค DOM

เนื่องจากองค์ประกอบที่เพิ่มเป็นของเหลวในธรรมชาติเมื่อมีการเพิ่มองค์ประกอบ DOM ชั่วคราวว่างเปล่าพวกเขาจะแสดงผลตามความกว้างของภาชนะที่ สิ่งนี้ดูแปลกเพราะนั่นสั้นกว่า 30px ในที่สุด

ฉันเพิ่มภาพรวมเล็กน้อยเพื่อแสดงให้เห็นว่าการคำนวณความสูงแตกต่างกันอย่างไร

ความแตกต่างของความสูงนั้นชัดเจน ฉันสามารถเพิ่มตำแหน่งแน่นอนและซ่อนเร้นได้ แต่ฉันแน่ใจว่าจะไม่มีผลกระทบ ฉันยังคงเชื่อมั่นว่านี่จะไม่ทำงาน!

(ฉันพูดนอกเรื่องเพิ่มเติม) ความสูงออกมา (แสดงผล) ต่ำกว่าความสูงที่แสดงผลจริง สิ่งนี้สามารถแก้ไขได้โดยการตั้งค่าความกว้างขององค์ประกอบ DOM ชั่วคราวเพื่อให้ตรงกับผู้ปกครองที่มีอยู่และสามารถทำได้อย่างถูกต้องในทางทฤษฎี ฉันไม่ทราบด้วยว่าจะมีอะไรเกิดขึ้นในการลบออกและเพิ่มกลับเข้าไปในตำแหน่งที่มีอยู่เดิม เมื่อพวกเขามาถึงเทคนิค InnerHTML ฉันจะมองใช้วิธีการที่แตกต่างกันนี้

* อย่างไร *ไม่มีสิ่งที่จำเป็น ในความเป็นจริงมันทำงานตามโฆษณาและคืนความสูงที่ถูกต้อง !!!

เมื่อฉันสามารถทำให้เมนูมองเห็นได้อีกครั้งอย่างน่าอัศจรรย์ DOM ได้คืนค่าความสูงที่ถูกต้องต่อเลย์เอาต์ของเหลวที่ด้านบนของหน้า (279px) รหัสข้างต้นยังใช้ getClientRects ซึ่งผลตอบแทน 280px

นี่คือภาพประกอบในภาพรวมต่อไปนี้ (นำมาจาก Chrome เมื่อใช้งานได้)

ตอนนี้ฉันมีความคิด noooooo ทำไมต้นแบบต้นแบบนั้นทำงานได้ แต่ดูเหมือนว่า หรือมิฉะนั้น getClientRects ก็ใช้ได้เช่นกัน

ฉันสงสัยว่าสาเหตุของปัญหาทั้งหมดที่เกิดขึ้นกับองค์ประกอบเหล่านี้คือการใช้ InnerHTML แทนภาคผนวกเด็ก แต่นั่นเป็นการคาดเดาที่บริสุทธิ์ ณ จุดนี้

offsetHeightมักจะ

หากคุณต้องการคำนวณบางสิ่ง แต่ไม่แสดงให้ตั้งค่าองค์ประกอบเป็นvisibility:hiddenและposition:absoluteเพิ่มลงในทรี DOM รับoffsetHeightและลบออก (นั่นคือสิ่งที่ห้องสมุดต้นแบบทำอยู่เบื้องหลังเมื่อฉันตรวจสอบครั้งล่าสุด)

บางครั้ง offsetHeight จะส่งกลับค่าศูนย์เนื่องจากองค์ประกอบที่คุณสร้างยังไม่ได้แสดงผลใน Dom ฉันเขียนฟังก์ชันนี้สำหรับสถานการณ์เช่นนี้:

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

หากคุณใช้ jQuery อยู่แล้วทางออกที่ดีที่สุดของคุณคือ.outerHeight()หรือ.height()ตามที่ระบุไว้

หากไม่มี jQuery คุณสามารถตรวจสอบขนาดของกล่องที่ใช้งานและเพิ่มการเติมช่องว่าง + ขอบ + ไคลเอนต์ความสูงหรือคุณสามารถใช้getComputedStyle :

var h = getComputedStyle (document.getElementById ('someDiv')) ความสูง;

h ตอนนี้จะเป็นสตริงเช่น "53.825px"

และฉันไม่สามารถหาข้อมูลอ้างอิงได้ แต่ฉันคิดว่าฉันได้ยินว่าgetComputedStyle()อาจมีราคาแพงดังนั้นอาจไม่ใช่สิ่งที่คุณต้องการโทรหาในแต่ละwindow.onscrollเหตุการณ์ (แต่แล้วไม่ใช่ jQuery height())

ด้วยMooTools :

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

หากฉันเข้าใจคำถามของคุณถูกต้องบางทีสิ่งนี้อาจช่วย:

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

คุณได้ตั้งค่าความสูงใน css โดยเฉพาะหรือไม่? หากคุณไม่จำเป็นต้องใช้offsetHeight;มากกว่าheight

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