ตัวอย่าง
ได้รับความสูงและความกว้างของ <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";ผลจากการ txt จะเป็น:
Height with padding and border: 280px
Width with padding and
border: 430px ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
สถานที่ให้บริการ offsetWidth ส่งกลับความกว้างสามารถมองเห็นได้ขององค์ประกอบในพิกเซลรวมทั้งการขยายพรมแดนและเลื่อน แต่ไม่ขอบ
สาเหตุที่ "viewable" เป็นคำที่ระบุเป็นเพราะถ้าเนื้อหาองค์ประกอบที่กว้างกว่าความกว้างที่เกิดขึ้นจริงขององค์ประกอบคุณสมบัตินี้จะกลับความกว้างที่มองเห็นได้ (See "More Examples")
หมายเหตุ: เพื่อให้เข้าใจถึงคุณสมบัตินี้คุณต้องเข้าใจ กล่อง CSS รุ่น
เคล็ดลับ: คุณสมบัตินี้มักจะใช้ร่วมกับ offsetHeight คุณสมบัติ
เคล็ดลับ: ใช้ clientHeight และ clientWidth คุณสมบัติที่จะกลับมามีความสูงสามารถดูได้และความกว้างขององค์ประกอบเท่านั้นรวมถึงช่องว่างภายใน
เคล็ดลับ: การเพิ่มแถบเลื่อนไปยังองค์ประกอบให้ใช้แบบ CSS ล้น สถานที่ให้บริการ
สถานที่แห่งนี้เป็นอ่านอย่างเดียว
สนับสนุนเบราว์เซอร์
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| offsetWidth | ใช่ | ใช่ | ใช่ | ใช่ | ใช่ |
วากยสัมพันธ์
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";ผลจากการ txt จะเป็น:
Height with padding: 270px
Height with padding and border:
280px
Width with padding: 420px
Width with padding and
border: 430px ลองตัวเอง» ตัวอย่าง
ตัวอย่างนี้แสดงให้เห็นถึงความแตกต่างระหว่าง 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";ผลจากการ txt จะเป็น:
Height with padding: 249px
Height with padding, border and
scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px ลองตัวเอง»