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

javascriptphần_tử.clientWidth;

Ví dụ

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

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);

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

javascript130

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:

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

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

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

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

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

Ví dụ

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

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

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

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

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

javascript0

Xem thêm