เมธอด innerHeight

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

ไวยากรณ์

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

javascript$(selector).innerHeight();

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

javascript$(selector).innerHeight(new value);

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

javascript$(selector).innerHeight(function(index, current value));

ตัวอย่าง

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

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

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

javascriptlet h1 = $('#test').height();
let h2 = $('#test').innerHeight();

$('#out1').text(h1);
$('#out2').text(h2);

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

ดูเพิ่มเติม