คุณสมบัติHTML DOM offsetWidth
ตัวอย่าง
รับความสูงและความกว้างขององค์ประกอบ <div> รวมถึงการเติมและเส้นขอบ:
var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติ offsetWidth จะคืนค่าความกว้างที่มองเห็นได้ขององค์ประกอบเป็นพิกเซล รวมถึงการเติม เส้นขอบ และแถบเลื่อน แต่จะไม่แสดงระยะขอบ
สาเหตุที่ระบุคำว่า "ดูได้" เนื่องจากหากเนื้อหาขององค์ประกอบกว้างกว่าความกว้างที่แท้จริงขององค์ประกอบ คุณสมบัตินี้จะส่งกลับเฉพาะความกว้างที่มองเห็นได้ (ดู "ตัวอย่างเพิ่มเติม")
หมายเหตุ:เพื่อให้เข้าใจคุณสมบัตินี้ คุณต้องเข้าใจ CSS Box Model
เคล็ดลับ:คุณสมบัตินี้มักใช้ร่วมกับ คุณสมบัติoffsetHeight
เคล็ดลับ:ใช้ คุณสมบัติ clientHeightและclientWidth เพื่อคืนค่าความสูงและความกว้างที่สามารถดูได้ขององค์ประกอบ รวมถึงการเติมเท่านั้น
เคล็ดลับ:หากต้องการเพิ่มแถบเลื่อนให้กับองค์ประกอบ ให้ใช้ คุณสมบัติโอเวอร์โฟ ลว์ CSS
คุณสมบัตินี้เป็นแบบอ่านอย่างเดียว
รองรับเบราว์เซอร์
| Property | |||||
|---|---|---|---|---|---|
| offsetWidth | Yes | Yes | Yes | Yes | Yes |
ไวยากรณ์
element.offsetWidth
รายละเอียดทางเทคนิค
| คืนมูลค่า: | ตัวเลข แสดงถึงความกว้างที่มองเห็นได้ขององค์ประกอบเป็นพิกเซล รวมถึงการเติม เส้นขอบ และแถบเลื่อน |
|---|
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ตัวอย่างนี้แสดงให้เห็นถึงความแตกต่างระหว่าง clientHeight/clientWidth และ offsetHeight/offsetWidth:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
ตัวอย่าง
ตัวอย่างนี้แสดงให้เห็นถึงความแตกต่างระหว่าง clientHeight/clientWidth และ offsetHeight/offsetWidth เมื่อเราเพิ่มแถบเลื่อนให้กับองค์ประกอบ:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";