Hàm getComputedStyle

Hàm getComputedStyle cho phép lấy giá trị của bất kỳ thuộc tính CSS nào của phần tử, ngay cả từ tệp CSS.

Cú pháp

let đối_tượng = getComputedStyle(phần_tử);

Chi tiết

Cách thức hoạt động của nó (chú ý: không như chúng ta đợi): tham số hàm nhận một phần tử, và trả về một đối tượng, chứa trong đó tất cả các thuộc tính CSS của phần tử đã truyền. Hãy đặt đối tượng này vào biến style. Tên gọi là tùy ý, đây chỉ là một biến - chúng ta nghĩ ra sao thì sẽ gọi như vậy:

let elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // trong style chứa các thuộc tính CSS

Hãy xuất ra, ví dụ, chiều rộng. Việc này được thực hiện như sau - style.width:

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.width);

Để xuất ra, ví dụ, padding trái - chúng ta làm như sau - style.paddingLeft:

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.paddingLeft);

Trong ví dụ tiếp theo, chúng ta sẽ xuất tất cả các thuộc tính CSS mà chúng ta quan tâm cho phần tử của mình:

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

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('paddingLeft: ' + style.paddingLeft); // sẽ xuất ra '30px'
console.log('borderTopWidth: ' + style.borderTopWidth); // sẽ xuất ra '20px'
console.log('borderTopStyle: ' + style.borderTopStyle); // sẽ xuất ra 'solid'

Sự không chính xác của getComputedStyle

Đôi khi hàm getComputedStyle hoạt động không hoàn toàn chính xác với chiều rộng và chiều cao. Điều này liên quan đến việc padding và đường viền mở rộng khối. Trong ví dụ tiếp theo, khối được đặt chiều rộng 200px, cũng như đường viền và border. Chiều rộng thực tế của khối là 300px, nhưng getComputedStyle vẫn sẽ xuất ra 200px:

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

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // sẽ xuất ra '200px'
console.log('height: ' + style.height); // sẽ xuất ra '200px'

Tức là: hóa ra là getComputedStyle bỏ qua việc mở rộng khối và hiển thị kích thước của nó như thể không có sự mở rộng đó. Nhưng đó chưa phải là tất cả: sự có mặt hoặc vắng mặt của thanh cuộn cũng có ý nghĩa - một số trình duyệt trừ đi chiều rộng của thanh cuộn từ chiều rộng được tính toán qua getComputedStyle, còn một số thì không trừ đi. Nói chung ở đây tất cả đều không đa trình duyệt và tốt hơn hết là không sử dụng getComputedStyle để xác định chiều rộng và chiều cao, mà sử dụng các chỉ số mà chúng ta sẽ học ngay bên dưới.

Giá trị đã tính toán

Còn một sắc thái nữa: nếu chiều rộng được đặt ở % - thì sau khi getComputedStyle hoạt động, chúng ta sẽ thấy nó ở đơn vị px. Tức là về bản chất chúng ta nhận được không phải là chiều rộng đã đặt, mà là chiều rộng đã được tính toán. Hãy xem ví dụ tiếp theo:

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

#elem {
	width: 30%; /* chiều rộng được đặt bằng % */
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // sẽ xuất ra chiều rộng bằng px

Xem thêm

thuộc tính cssText,
thiết lập hàng loạt các kiểu CSS