วิธีการ innerWidth และ innerHeight ใน jQuery

ด้วยวิธีการ innerWidth และ innerHeight เราได้ความกว้างและความสูงของ องค์ประกอบ แต่คราวนี้จะพิจารณาไม่เพียงแค่เนื้อหาเท่านั้น แต่ยังรวมถึงช่องว่างภายใน - padding ด้วย

ลองรับค่าความกว้างและความสูงของย่อหน้า #test กัน แต่คราวนี้ใช้ innerWidth และ innerHeight และแสดงผลในย่อหน้าอื่น สมมติว่าเรามีย่อหน้าสองย่อหน้า:

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

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

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

ใน Javascript เราเขียนโค้ดต่อไปนี้:

let w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

อย่างที่คุณเห็น ค่าต่างกันไปแล้ว 10px เนื่องจากคำนึงถึงช่องว่างภายใน ซึ่งใน กรณีของเราคือ 5px ทั้งสี่ด้าน

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

$('#test1').innerWidth(250);
$('#test2').innerHeight(200);

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