วิธี outerWidth

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

ไวยากรณ์

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

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

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

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

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

javascript$(selector).outerWidth(function(index in set, current width value));

ตัวอย่าง

เพื่อเปรียบเทียบ ลองแสดงข้อมูลเกี่ยวกับ ความกว้างของย่อหน้า #test ที่ได้รับจากวิธี width, innerWidth และ outerWidth:

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

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

javascriptlet w1 = $('#test').width();
let w2 = $('#test').innerWidth();
let w3 = $('#test').outerWidth(false);
let w4 = $('#test').outerWidth(true);

$('#out1').text(w1);
$('#out2').text(w2);
$('#out3').text(w3);
$('#out4').text(w4);

ดูเพิ่มเติม