ตัวแปร offsetHeight ของ HTML DOM Element

คำนิยามและการใช้งาน

offsetHeight ตัวแปรกลับค่าความสูงที่มีทั้งหมดขององค์ประกอบ HTML (เป็นพิกเซล) รวมถึง PADDING และ BORDER และ SCROLLBAR แต่ไม่รวม MARGIN

offsetHeight ตัวแปรเป็นอ่านได้เท่านั้น

ดูเพิ่มเติม:ตัวอย่าง CSS โมเดลบอกเลข

offsetParent

ทุกองค์ประกอบของบล็อคทุกตัวจะรายงานความสูง offset ต่อพ่อเกี่ยวข้องกับ offset:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

พ่อเกี่ยวข้องกับ offset หมายถึงพ่อที่ใกล้ที่สุดที่มีตำแหน่งไม่เป็น static

ถ้าไม่มีพ่อเกี่ยวข้องกับ offset แล้ว ตัวเลข offset จะเป็นความสูงต่อข้อความของเอกสาร

ดูเพิ่มเติม:

ตัวแปร offsetWidth

ตัวแปร offsetParent

ตัวแปร offsetTop

ตัวแปร offsetLeft

ตัวแปร clientTop

ตัวแปร clientLeft

ตัวแปร clientWidth

ตัวแปร clientHeight

ตัวอย่าง

ตัวอย่าง 1

แสดงความสูงและความกว้างของ "myDIV" รวมถึงพADDING และ BORDER:

const elmnt = document.getElementById("myDIV");
let text = "สูงด้วยพADDING และ BORDER: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ความแตกต่างระหว่าง clientHeight/clientWidth และ offsetHeight/offsetWidth

มีแถบเลื่อน:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

ทดลองด้วยตัวเอง

ไม่มีแถบเลื่อน:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

ทดลองด้วยตัวเอง

รูปแบบ

element.offsetHeight

ค่าที่กลับมา

ประเภท คำอธิบาย
ตัวเลข ความสูงที่ทำงานขององค์ประกอบ (เป็นพิกเก็ต) รวมถึงเพดานเครื่องงาน ชานเขตและแถบเลื่อน

สนับสนุนโดยบราวเซอร์

ทุกบราวเซอร์ทุกครั้งสนับสนุน element.offsetHeight：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน