เมธอด outerHeight

เมธอด outerHeight ช่วยให้ได้รับ และเปลี่ยนแปลงความสูงขององค์ประกอบโดยคำนึงถึง padding, border และเลือก性地 - margin ขององค์ประกอบ สิ่งสำคัญ ที่ต้องจำคือ เราจะได้รับ 'ค่าที่คำนวณได้' ของความสูง (computed height) ข้อผิดพลาดในการคำนวณอาจเกิดขึ้นได้เช่นกันหาก ผู้ใช้เปลี่ยนขนาดของหน้า และหาก องค์ประกอบหรือผู้ปกครองของมันถูกซ่อนอยู่

ไวยากรณ์

นี่คือวิธีที่เราสามารถรับความสูงขององค์ประกอบได้ เมธอดนี้สามารถ รับพารามิเตอร์เสริมในรูปแบบ true หรือ false (false เป็นค่าเริ่มต้น) ขึ้นอยู่กับว่าจะรวม margin หรือไม่ ในบางกรณี ค่าที่ได้รับอาจเป็นเศษส่วน:

$(selector).outerWidth([including_margin]);

เพื่อเปลี่ยนความกว้างขององค์ประกอบ - สามารถส่งแค่ ตัวเลข (ตัวอย่างเช่น 400) จากนั้นหน่วย การวัดจะเป็นพิกเซล หรือสตริง ที่ระบุหน่วยการวัด (ตัวอย่างเช่น '10em'):

$(selector).outerHeight(new value, [including_margin]);

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

$(selector).outerHeight(function(index in set, current height value));

ตัวอย่าง

มาเปรียบเทียบข้อมูลเกี่ยวกับ ความสูงของย่อหน้า #test ที่ได้รับจากเมธอด height, innerHeight และ outerHeight:

<p id="test">ข้อความ</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid blue;
}

let h1 = $('#test').height();
let h2 = $('#test').innerHeight();
let h3 = $('#test').outerHeight();
let h4 = $('#test').outerHeight(true);

$('#out1').text(h1);
$('#out2').text(h2);
$('#out3').text(h3);
$('#out4').text(h4);

ดูเพิ่มเติม

เมธอด height,
ซึ่งช่วยให้รับและเปลี่ยนความสูงขององค์ประกอบ
เมธอด innerHeight,
ซึ่งช่วยให้รับและเปลี่ยนความสูงขององค์ประกอบ โดยคำนึงถึง padding ของมัน