วิธี width

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

ไวยากรณ์

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

$(selector).width();

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

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

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

$(selector).width(function(หมายเลขในชุด, ค่าความกว้างปัจจุบัน));

ตัวอย่าง

เมื่อคลิกที่ div เปลี่ยน ความกว้างของมันเป็นค่า 40px โดยใช้วิธี width และใช้ css เปลี่ยนพื้นหลังเป็นสีเขียว:

<div id="test"></div>

#test {
	width: 90px; 
	height: 80px;
	background: red; 
	color: white;
	margin-top: 10px; 
	cursor: pointer;
}

$('#test').one('click', function() {
	$(this).width(40).css({
		cursor: 'auto',
		backgroundColor: 'green'
	});
});

ดูเพิ่มเติม

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