property offsetWidth ของ HTML DOM Element

คำนิยามและวิธีใช้

offsetWidth property นี้กลับค่ากว้างขององค์ประกอบ (เป็นพิกัดเป็นพิกเซล) ที่ที่มองเห็นขององค์ประกอบ รวมถึงพาดิ้งและเส้นขอบ และหลอดเลื่อน แต่ไม่รวมถึงมุมนอก

offsetWidth property นี้เป็นที่เข้าอ่านเท่านั้น

ดูเพิ่มเติมที่:ตัวอย่างฝึกสอน CSS Box Model

offsetParent

ทุกองค์ประกอบของเซลล์ที่เป็นบล็อครายงานตำแหน่งเรียบเรียงต่อพ่อเมื่องย้ายตำแหน่งของเขา:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

พ่อเมื่องย้ายตำแหน่งหมายถึงพ่อเมื่องที่ใกล้ที่สุดที่มีตำแหน่งย้ายตำแหน่งไม่เป็นสถานะที่ยังไม่เคยถูกย้ายตำแหน่ง

ถ้าไม่มีพ่อเมื่องย้ายตำแหน่ง ตำแหน่งเป็นต่อตัวเองของบทความของเอกสาร

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

property offsetHeight

property offsetParent

property offsetTop

property offsetLeft

property clientTop

property clientLeft

property clientWidth

property clientHeight

ตัวอย่าง

ตัวอย่าง 1

เรียกใช้ "myDIV" สูงและกว้าง รวมถึงพาดิ้งและเส้นขอบ:

const elmnt = document.getElementById("myDIV");
let text = "สูงด้วยพาดิ้งและเส้นขอบ: " + 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.offsetWidth

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

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

การสนับสนุนเบราเซอร์

ทุกเบราเซอร์ทุกทีม element.offsetWidth：

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