Đọ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:

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

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

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

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

javascriptlet 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:

javascript 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:

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

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

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

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

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

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

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