Thuộc tính offsetWidth

Thuộc tính offsetWidth chứa toàn bộ chiều rộng của phần tử (bao gồm chiều rộng thực tế của phần tử, chiều rộng đường viền, khoảng đệm bên trong, thanh cuộn):

Cú pháp

phần tử.offsetWidth;

Ví dụ

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

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

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

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

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

150

Ví dụ

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

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

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

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

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

0

Xem thêm

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