เมธอด outerWidth และ outerHeight ใน jQuery

คู่เมธอดสุดท้ายคือ outerWidth และ outerHeight ด้วยเมธอดเหล่านี้ทำให้สามารถรับ ความกว้างและความสูงขององค์ประกอบโดยคำนึงถึงช่องว่างและขอบทั้งหมด หรืออาจไม่นับรวมช่องว่างภายนอก margin

มาดูตัวอย่าง สมมติว่าเรามีย่อหน้า:

<p id="test">text</p>
<p id="out"></p>

CSS มีลักษณะดังนี้:

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

มาเริ่มรับค่าความกว้างและความสูงของย่อหน้า #test โดยคำนึงถึงช่องว่างภายในและขอบ สำหรับสิ่งนี้จำเป็นต้องส่ง false เข้าไปในเมธอดเหล่านี้ หรือปล่อยวงเล็บว่างไว้ (เนื่องจาก ค่าเริ่มต้นในเมธอดคือ false):

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

ตอนนี้ค่าของเราจะต่างออกไปอีก 4px เนื่องจากความหนาของขอบคือ 2px ในแต่ละด้าน

และตอนนี้มาเริ่มรับค่าความกว้างและความสูงของย่อหน้า #test โดยคำนึงถึงช่องว่างและขอบทั้งหมด สำหรับสิ่งนี้จำเป็นต้องส่ง true เข้าไปในเมธอด outerWidth และ outerHeight:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Width: ' + w + ' Height: ' + h);

ตอนนี้ค่าของเราจะต่างจากค่าก่อนหน้า อีก 20px เนื่องจากช่องว่างภายนอกของเรา คือ 10px ในแต่ละด้าน

เสริมการแก้ปัญหาจากงานก่อนหน้า - แสดงผล ในย่อหน้าที่สามใต้ดิฟ #wrapper ค่าความกว้างและความสูงของดิฟ #wrapper - โดยคำนึงถึงช่องว่างภายในและขอบ แต่ไม่รวม ช่องว่างภายนอก ในย่อหน้าที่สี่ แสดงผล ค่าความกว้างและความสูงของดิฟ #wrapper โดยคำนึงถึงช่องว่างและขอบทั้งหมด

นอกจากนี้ด้วยเมธอด outerWidth และ outerHeight เราสามารถ เปลี่ยนแปลงค่าความกว้างและความสูงขององค์ประกอบได้ ตัวอย่างเช่น มากำหนดความกว้างของดิฟ #test1 ให้เท่ากับ 250px และความสูงของ #test2 - 200px:

$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);

เมธอดทั้งหมดที่ระบุไว้สำหรับทำงานกับขนาด องค์ประกอบยังอนุญาตให้ใช้งานฟังก์ชัน กับแต่ละองค์ประกอบในชุดได้อีกด้วย