คุณสมบัติ clientWidth

คุณสมบัติ clientWidth เก็บความกว้าง ขององค์ประกอบภายในขอบเขต พร้อมกับ padding, แต่ไม่รวม border และการเลื่อน

ไวยากรณ์

javascriptองค์ประกอบ.clientWidth;

ตัวอย่าง

ลองหาขนาดขององค์ประกอบ:

html<div id="elem"></div>

css#elem {
  width: 100px;
  height: 100px;
  border: 10px solid black;
  padding: 15px;
}

javascriptlet elem = document.querySelector('#elem');
console.log(elem.clientWidth);

ผลลัพธ์จากการรันโค้ด:

javascript130

ตัวอย่าง

หากองค์ประกอบมีการเลื่อนปรากฏขึ้น ความกว้าง ของเนื้อหาจะลดลงตามความกว้างของแถบเลื่อน (ประมาณ 16px - ขึ้นอยู่กับเบราว์เซอร์, ระบบปฏิบัติการ, อุปกรณ์) ในตัวอย่างต่อไปนี้ความกว้างขององค์ประกอบจะน้อย กว่าที่คาดไว้:

html<div id="elem">องค์ประกอบนี้มีแถบเลื่อน</div>

css#elem {
  width: 100px;
  height: 100px;
  border: 10px solid black;
  padding: 15px;
  overflow: scroll;
}

javascriptlet elem = document.querySelector('#elem');
console.log(elem.clientWidth);

ผลลัพธ์จากการรันโค้ด:

javascript114 (ขึ้นอยู่กับเบราว์เซอร์)

ตัวอย่าง

หากองค์ประกอบถูกซ่อนไว้ clientWidth จะมีค่าเท่ากับ 0:

html<div id="elem"></div>

css#elem {
  display: none; /* องค์ประกอบที่ซ่อนอยู่ */
  width: 100px;
  height: 100px;
  border: 10px solid black;
  padding: 15px;
}

javascriptlet elem = document.querySelector('#elem');
console.log(elem.clientWidth);

ผลลัพธ์จากการรันโค้ด:

javascript0

ดูเพิ่มเติม