รับ div ส่วนสูงด้วย JavaScript ธรรมดา

มีความคิดเห็นเกี่ยวกับวิธีเพิ่มความสูงของ div โดยไม่ใช้ jQuery หรือไม่?

ฉันถูกค้นหามากเกิน Stack สำหรับคำถามนี้และดูเหมือนว่าทุกคำตอบจะชี้ไปที่ของ .height()jQuery

ฉันลองอะไรทำนองmyDiv.style.heightนั้น แต่มันก็ไม่ได้ผลอะไรเลยแม้แต่ตอนที่ div ของฉันมีwidthและheightตั้งค่าใน CSS

var clientHeight = document.getElementById('myDiv').clientHeight;

หรือ

var offsetHeight = document.getElementById('myDiv').offsetHeight;

clientHeight รวมถึงการขยาย

offsetHeight รวมถึงการขยาย, scrollBar และเส้นขอบ

jsFiddle

var element = document.getElementById('element');
alert(element.offsetHeight);

ตัวเลือกอื่นคือการใช้ฟังก์ชัน getBoundingClientRect โปรดทราบว่า getBoundingClientRect จะกลับมาเป็นสี่เหลี่ยมเปล่าถ้าองค์ประกอบของการแสดงผลเป็น 'ไม่มี'

ตัวอย่าง:

var elem = document.getElementById("myDiv");
if(elem) {
   var rect = elem.getBoundingClientRect();
   console.log(rect.height);  
}

var myDiv = document.getElementById('myDiv'); //get #myDiv
alert(myDiv.clientHeight);

ความสูงและความกว้างของลูกค้าคือสิ่งที่คุณกำลังมองหา

offsetHeight และ offsetWidth ส่งคืนความสูงและความกว้าง แต่รวมถึงเส้นขอบและแถบเลื่อน ขึ้นอยู่กับสถานการณ์คุณสามารถใช้อย่างใดอย่างหนึ่ง

หวังว่านี่จะช่วยได้

คำตอบอื่น ๆ ไม่ได้ทำงานสำหรับฉัน นี่คือสิ่งที่ฉันพบในw3schoolsสมมติว่าdivมีheightและ / หรือwidthชุด

สิ่งที่คุณต้องมีคือheightและwidthไม่รวมช่องว่างภายใน

    var height = document.getElementById('myDiv').style.height;
    var width = document.getElementById('myDiv').style.width;

คุณ downvoters:คำตอบนี้ช่วยอย่างน้อย 5 คนตัดสินโดย upvotes ที่ฉันได้รับ หากคุณไม่ชอบให้บอกฉันทีว่าทำไมฉันจึงสามารถแก้ไขได้ นั่นคือสัตว์เลี้ยงที่ฉุนที่สุดของฉันด้วย downvotes; คุณไม่ค่อยบอกฉันว่าทำไมคุณถึงลงคะแนน

<div id="item">show taille height</div>
<script>
    alert(document.getElementById('item').offsetHeight);
</script>

Jsfiddle

นอกจากนี้el.clientHeightและel.offsetHeightเมื่อคุณต้องการความสูงของเนื้อหาภายในองค์ประกอบ (ไม่ว่าจะตั้งค่าความสูงขององค์ประกอบนั้นel.scrollHeightไว้ที่ใดก็ตาม) คุณสามารถใช้ ข้อมูลเพิ่มเติม

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

var el = document.getElementById('myDiv')

el.style.maxHeight = el.scrollHeight+'px'

ลอง

myDiv.offsetHeight 

console.log("Height:", myDiv.offsetHeight );

#myDiv { width: 100px; height: 666px; background: red}

<div id="myDiv"></div>

นี่เป็นอีกทางเลือกหนึ่ง:

var classElements = document.getElementsByClassName("className");

function setClassHeight (classElements, desiredHeightValue) 
    {
        var arrayElements = Object.entries(classElements);
        for(var i = 0; i< arrayElements.length; i++) {
            arrayElements[i][1].style.height = desiredHeightValue;
        }

    }

ทางเลือกหนึ่งก็คือ

const styleElement = getComputedStyle(document.getElementById("myDiv"));
console.log(styleElement.height);