Đôi khi, khi phát triển dự án chỉ sử dụng CSS sẽ không đủ đối với nhu cầu bạn cần cho một hiệu ứng cần xây dựng. Bạn sẽ cần điều chỉnh được giá trị CSS với Javascript. Nhưng làm sao để lấy giá trị trong CSS để có thể làm việc này?
Có hai cách khả thi, tùy thuộc vào việc bạn đang cố gắng tạo kiểu nội tuyến hay kiểu tính toán.
Inline Styles
Với cách viết stylesheet inline style trong thuộc tính HTML bên dưới
<div class="element" style="font-size: 1.5rem; color: green;">Hello world</div>
Để có thể lấy được giá trị của các thuộc tính trong style inline bạn có thể sử dụng cách truy xuất style trong đối tượng element selector
const elementAfterSelector = document.querySelector("#element");
console.log(elementAfterSelector.style.fontSize); // 1.5rem;
console.log(elementAfterSelector.style.color); // green;
Computed Styles
Nếu bạn viết stylesheet cho dự án của mình trong các tệp CSS thì computed style sẽ là cách giúp bạn lấy các giá trị của thuộc tính bạn đã viết trong CSS file.
Nó sẽ bao gồm 2 tham số:
// *.js
getComputedStyle(selectorElement, pseudoElement);
- Với
selectorElementở đây sẽ phần tử phận cần lấy thuộc tính của nó vớidocument.querySelectorchẳng hạn. - Với
pseudoElementở đây đề cập đến chuỗi của phần tử giả mà bạn đang cố lấy (nếu có). Bạn có thể bỏ qua giá trị này nếu không chọn.
Hãy xem qua một ví dụ để giúp bạn hiểu mọi thứ. Giả sử bạn có HTML và CSS sau:
// *.html
<div id="element"> Element </div>
// *.css
#element { color: green }
Và khá đơn giản để chúng ta có thể có giá trị green của color bằng cách sau
// *.js
const el = document.querySelector("#element");
getComputedStyle(el); // CSSStyleDeclaration list
// getComputedStyle(el).color // green
Bạn cũng có thể thấy các thuộc tính của đối tượng này trong dev-tools của trình duyệt Chrome và Firefox. Chọn inspector hoặc F12 (Win) hoặc Option + Command + I (MacOS)
Style pseudo elements
Đôi khi trong dự án, sẽ có trường hợp bạn dùng ::before và ::after. Để lấy được giá trị của các thuộc tính CSS trong pseudo element này. Chúng ta co thể sử dụng getComputedStyle như sau:
// *.html
<div id="element"> Element </div>
// *.css
#element { color: green }
#element::before { content: "test", color: pink; }
Và khá đơn giản để chúng ta có thể có giá trị green của color bằng cách sau
// *.js
const el = document.querySelector("#element");
const computedStyle = getComputedStyle(el, "::before"); // CSSStyleDeclaration list
// computedStyle.content // "test"
// computedStyle.color // pink