วิธี height

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

ไวยากรณ์

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

$(selector).height();

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

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

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

ค่าความสูงขององค์ประกอบจะเปลี่ยนเป็นค่า ที่ฟังก์ชันคืนกลับมา:

$(selector).height(function(ลำดับในชุด, ค่าความสูงปัจจุบัน));

ตัวอย่าง

มาเปลี่ยนความสูงของ #test เป็นค่า 30px เมื่อคลิก โดยใช้วิธี height และใช้ css เปลี่ยนพื้นหลังเป็นสีเขียว:

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

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

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

ดูเพิ่มเติม

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