คุณสมบัติ clientWidth

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

ไวยากรณ์

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

ตัวอย่าง

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

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

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

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

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

130

ตัวอย่าง

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

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

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

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

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

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

ตัวอย่าง

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

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

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

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

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

0

ดูเพิ่มเติม

คุณสมบัติ clientHeight,
ซึ่งเก็บความสูงขององค์ประกอบภายในขอบเขต
เมธอด getComputedStyle,
ซึ่งรับค่าคุณสมบัติ CSS ขององค์ประกอบ