ไคลเอ็นต์องค์ประกอบ HTML DOM ความกว้าง
❮ วัตถุธาตุตัวอย่าง
รับความสูงและความกว้างของ "myDIV" รวมถึงการเติม:
const elmnt = document.getElementById("myDIV");
let text = "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px";
ตัวอย่างเพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติclientWidth
ส่งคืนความกว้างที่มองเห็นได้ขององค์ประกอบเป็นพิกเซล รวมถึงการเติมแต่จะไม่แสดงเส้นขอบ แถบเลื่อน หรือระยะขอบ
คุณสมบัติclientWidth
เป็นแบบอ่านอย่างเดียว
กวดวิชา:
ดูสิ่งนี้ด้วย:
ลูกค้าองค์ประกอบคุณสมบัติความสูง
The Element offsetHeight คุณสมบัติ
องค์ประกอบ offsetWidth คุณสมบัติ
หากต้องการเพิ่มแถบเลื่อนให้กับองค์ประกอบ ให้ใช้ คุณสมบัติโอเวอร์โฟ ลว์ CSS
ไวยากรณ์
element.clientWidth
คืนมูลค่า
พิมพ์ | คำอธิบาย |
ตัวเลข | ความกว้างที่มองเห็นได้ขององค์ประกอบ (เป็นพิกเซล) รวมถึงการเติม |
ความแตกต่างระหว่าง 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.clientWidth
รองรับในทุกเบราว์เซอร์:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
❮ วัตถุธาตุ