รับความสูงของ div โดยไม่กำหนดความสูงใน css

มีวิธีใดบ้างที่จะได้รับความสูงขององค์ประกอบหากไม่มีการตั้งค่ากฎความสูง CSS สำหรับองค์ประกอบฉันไม่สามารถใช้.height()เมธอด jQuery ได้เนื่องจากต้องตั้งกฎ CSS ก่อน มีวิธีอื่นในการรับความสูงหรือไม่?

jQuery .heightจะส่งคืนความสูงขององค์ประกอบให้คุณ ไม่จำเป็นต้องมีคำจำกัดความ CSS เนื่องจากจะกำหนดความสูงที่คำนวณได้

การสาธิต

คุณสามารถใช้.height(), .innerHeight()หรือouterHeight()ขึ้นอยู่กับสิ่งที่คุณต้องการ

.height() - คืนค่าความสูงขององค์ประกอบไม่รวมช่องว่างขอบและระยะขอบ

.innerHeight() - ส่งคืนความสูงขององค์ประกอบรวมถึงการขยาย แต่ไม่รวมเส้นขอบและระยะขอบ

.outerHeight() - ส่งคืนความสูงของ div รวมทั้งเส้นขอบ แต่ไม่รวมระยะขอบ

.outerHeight(true) - ส่งกลับความสูงของ div รวมระยะขอบ

ตรวจสอบข้อมูลโค้ดด้านล่างสำหรับการสาธิตสด :)

$(function() {
  var $heightTest = $('#heightTest');
  $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"')
    .append('<p>Height (.height() returns) : ' + $heightTest.height() + ' [Just Height]</p>')
    .append('<p>Inner Height (.innerHeight() returns): ' + $heightTest.innerHeight() + ' [Height + Padding (without border)]</p>')
    .append('<p>Outer Height (.outerHeight() returns): ' + $heightTest.outerHeight() + ' [Height + Padding + Border]</p>')
    .append('<p>Outer Height (.outerHeight(true) returns): ' + $heightTest.outerHeight(true) + ' [Height + Padding + Border + Margin]</p>')
});

div { font-size: 0.9em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="heightTest" style="height: 150px; padding: 10px; margin: 10px; border: 2px solid blue; overflow: hidden; ">
</div>

เพียงบันทึกไว้ในกรณีที่คนอื่นมีปัญหาเดียวกัน

ฉันมีปัญหาเดียวกันและพบคำตอบที่ต่างออกไป ฉันพบว่าการรับความสูงของ div ที่มีความสูงนั้นถูกกำหนดโดยเนื้อหานั้นจำเป็นต้องเริ่มต้นบนwindow.loadหรือwindow.scrollไม่ใช่documentมิฉะนั้นฉันจะได้รับความสูง / ความสูงที่น้อยกว่าปกติเช่นก่อนที่รูปภาพจะโหลด ฉันยังใช้outerHeight ()

var currentHeight = 0;
$(window).load(function() {
    //get the natural page height -set it in variable above.

    currentHeight = $('#js_content_container').outerHeight();

    console.log("set current height on load = " + currentHeight)
    console.log("content height function (should be 374)  = " + contentHeight());   

});

สามารถทำเช่นนี้ในjQuery ลองตัวเลือกทั้งหมด.height(), หรือ.innerHeight().outerHeight()

$('document').ready(function() {
    $('#right_div').css({'height': $('#left_div').innerHeight()});
});

ตัวอย่างภาพหน้าจอ

หวังว่านี่จะช่วยได้ ขอบคุณ !!

นอกจากนี้ยังให้แน่ใจว่าdiv ในปัจจุบันคือการผนวกเข้ากับ DOMและสามารถมองเห็นได้