Cách lấy giá trị thuộc tính CSS với Javascript

Đô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ới document.querySelector chẳ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

Untitled

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)

Screen Shot 2022-03-02 at 00.42.38.png

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