วิธีการ innerWidth

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

ไวยากรณ์

รับความกว้างขององค์ประกอบ ในบางกรณี ค่าที่ได้รับอาจเป็นทศนิยม:

$(selector).innerWidth();

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

$(selector).innerWidth(ค่าใหม่);

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

$(selector).innerWidth(function(ลำดับในชุด, ค่าปัจจุบันของความกว้าง));

ตัวอย่าง

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

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

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

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();

$('#out1').text(w1);
$('#out2').text(w2);

เราจะเห็นความแตกต่าง 10px ซึ่งเป็นผลรวมของ การเว้นช่องว่างภายในซ้ายและขวาของเรา

ดูเพิ่มเติม

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