HTML DOM Element clientWidth โครงสร้าง

การประกาศและการใช้งาน

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

clientWidth ตัวแปรเป็นการอ่านเฉพาะ

ดูเพิ่มเติมตัวอย่าง CSS โครงสร้าง

ดูเพิ่มเติม

clientHeight โครงสร้าง

clientTop โครงสร้าง

clientLeft โครงสร้าง

offsetHeight โครงสร้าง

offsetWidth โครงสร้าง

หากต้องการเพิ่มกระดานหมุนในองค์ประกอบ โปรดใช้ CSS overflow 属性。

ตัวอย่าง

ตัวอย่าง 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
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน