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

การกำหนดและการใช้งาน

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

clientWidth ตัวแปรเป็นการเข้าถึงแค่ล่าสุด

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

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

ตัวแปร clientHeight

ตัวแปร clientTop

ตัวแปร clientLeft

ตัวแปร offsetHeight

ตัวแปร offsetWidth

หากต้องการเพิ่มกระบวนวางหลักแบบเซลล์เนื่องเหตุ ให้ใช้ คุณสมบัติ overflow ของ CSS。

ตัวอย่าง

ตัวอย่าง 1

เรียกค่าความสูงและความกว้างของ "myDIV" รวมถึงเพดานรับของ

const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";

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

ตัวอย่าง 2

ตัวอย่าง 2: ความแตกต่างระหว่าง clientHeight/clientWidth และ offsetHeight/offsetWidth

ไม่มีกระบวนวางหลักแบบเซลล์เนื่องเหตุ

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

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

มีกระบวนวางหลักแบบเซลล์ล์เนื่องเหตุ

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

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

การใช้งาน

element.clientWidth

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

ชนิด รายละเอียด
ค่าตัวเลข ความกว้างขององค์ประกอบ (ด้วยพิกัดพิเศษ)，รวมถึงเพดานรับของ。

การเข้าถึงบราวเซอร์

ทุกบราวเซอร์เข้าถึง element.clientWidth：

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