Thuộc tính clientWidth

Thuộc tính clientWidth chứa chiều rộng phần tử bên trong đường viền cùng với padding, nhưng không có border và thanh cuộn.

Cú pháp

phần_tử.clientWidth;

Ví dụ

Hãy tìm kích thước của phần tử:

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

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

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

Kết quả thực thi mã:

130

Ví dụ

Nếu phần tử xuất hiện thanh cuộn thì chiều rộng nội dung sẽ giảm đi bằng chiều rộng của thanh cuộn (khoảng 16px - phụ thuộc vào trình duyệt, HĐH, thiết bị). Trong ví dụ sau, chiều rộng phần tử sẽ nhỏ hơn so với dự kiến:

<div id="elem">Phần tử này có thanh cuộn.</div>

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

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

Kết quả thực thi mã:

114 (phụ thuộc vào trình duyệt)

Ví dụ

Nếu phần tử bị ẩn, thì clientWidth sẽ bằng 0:

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

#elem {
	display: none; /* phần tử ẩn */
	width: 100px;
	height: 100px;
	border: 10px solid black;
	padding: 15px;
}

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

Kết quả thực thi mã:

0

Xem thêm

thuộc tính clientHeight,
chứa chiều cao phần tử bên trong đường viền
phương thức getComputedStyle,
lấy giá trị thuộc tính CSS của phần tử