Đọc thuộc tính từ file CSS trong JavaScript

Thuộc tính được đặt trong file CSS có thể đọc được bằng một hàm đặc biệt getComputedStyles.

Hãy xem cách thực hiện điều này. Giả sử chúng ta có phần tử sau:

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

Giả sử cho phần tử này có các kiểu sau được đặt:

#elem {
	width: 100px;
	color: red;
	font-size: 20px;
}

Lấy tham chiếu đến phần tử vào biến:

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

Bây giờ hãy truyền tham chiếu đến phần tử đã lấy làm tham số cho hàm getComputedStyles:

let computedStyle = getComputedStyle(elem);

Kết quả chúng ta sẽ nhận được một đối tượng, chứa giá trị của các thuộc tính CSS cho phần tử của chúng ta. Hãy sử dụng nó để đọc, ví dụ, màu sắc:

console.log(computedStyle.color); // sẽ in ra 'red'

Và bây giờ là chiều rộng:

console.log(computedStyle.width); // sẽ in ra '100px'

Và bây giờ là kích thước phông chữ:

console.log(computedStyle.fontSize); // sẽ in ra '20px'

Cho phần tử có các kiểu sau được đặt:

#elem {
	width: 200px;
	height: 200px;
}

Khi nhấp vào nút, hãy xuất chiều rộng và chiều cao của phần tử.

Cho phần tử có các kiểu sau được đặt:

#elem {
	width: 200px;
	height: 200px;
}

Khi nhấp vào nút, hãy tăng chiều rộng và chiều cao của phần tử lên gấp đôi.