programming javascript

Làm cách nào để lấy giá trị biến CSS gốc trong JavaScript?

Các thuộc tính hoặc biến tùy chỉnh là một bổ sung rất hữu ích cho CSS. Trong một số trường hợp, chúng ta có thể cần thay đổi giá trị của biến CSS một cách linh hoạt hoặc lấy giá trị của biến trong Javascript. Điều này có thể được thực hiện bằng API trình duyệt gốc

Trong khi thiết kế lại, tôi cần một cách để JavaScript lấy giá trị của biến CSS để xác định trạng thái của trang. May mắn cho chúng tôi, có một phương pháp dễ dàng và tương thích với trình duyệt

Người ta thường thấy các biến cấp gốc toàn cầu được sử dụng

:root {
  --display-moon: none;
}

Ngày nay, tôi thích sử dụng một khung CSS tiện ích như Tailwind để thiết lập các thuộc tính chung của tôi. Sau đó, tôi đặt các biến cấp độ thành phần để giới hạn phạm vi của mình

.hero-wrapper {
  --display-moon: none;
}

Trong trường hợp của tôi, tôi đang sử dụng kết hợp bộ chọn lớp và lược đồ màu ưu tiên để đặt các biến dựa trên việc người dùng muốn chủ đề tối hay sáng. Vớipres-color-scheme, trình duyệt của người dùng có thể đặt mặc định khi tải trang. Tôi cần một cách để biết trình duyệt mặc định là gì. Vì tôi đang hiển thị SVG mặt trăng ở chế độ tối, nên tôi có thể nhìn vào biến mà tôi đã gắn vào mặt trăng

Với JavaScript, thật dễ dàng để truy vấn các biến CSS của một phần tử

getComputedStyle[document.querySelector['.hero-wrapper']]
  .getPropertyValue['--display-moon'];

Tôi có thể sử dụng điều này để đặt một biến cho tôi biết trạng thái ban đầu bằng cách kiểm tra xem biến CSS là

document.documentElement.style
  .setProperty['--display-moon', 'none'];

0 hay

document.documentElement.style
  .setProperty['--display-moon', 'none'];

const initialDarkMode =
  getComputedStyle[document.querySelector['.hero-wrapper']]
    .getPropertyValue['--display-moon'] === 'block';

Nếu tôi đặt các biến của mình ở gốc thay vì một phần tử HTML, thì mã sẽ tương tự nhưng không có querySelector

const initialDarkMode =
  getComputedStyle[document.documentElement]
    .getPropertyValue['--display-moon'] === 'block';

Trong trường hợp của tôi, JavaScript không bao giờ cần đặt biến CSS. Nếu tôi cần đặt một biến CSS thì điều đó cũng dễ dàng

document.documentElement.style
  .setProperty['--display-moon', 'none'];

Một phần tử gốc có thể sử dụng tài liệu. tài liệuElement. Với phần tử HTML, hãy sử dụng tài liệu. querySelector hoặc một phương thức chọn phần tử khác

Một điều cuối cùng

Nếu có thắc mắc hoặc thấy sai sót hãy bình luận bên dưới

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ nó với những người khác. Đó là lời cảm ơn tốt nhất mà tôi có thể yêu cầu và nó cho tôi động lực để tiếp tục viết

Cập nhậtCập nhậtCập nhậtCập nhậtCập nhật

JavaScript . CSS

Ảnh của Matt Ferderer. Chỉ cần tưởng tượng một cái gì đó thực sự tốt đẹp và đó sẽ là một chiến thắng cùng có lợi cho cả hai chúng tôi

Matt Ferderer

Nhà phát triển phần mềm tập trung vào việc tạo ra trải nghiệm người dùng tuyệt vời. Tôi thích học hỏi, chia sẻ và giúp đỡ người khác tạo ra những điều tuyệt vời

Thuộc tính tùy chỉnh [đôi khi được gọi là biến CSS hoặc biến xếp tầng] là các thực thể do tác giả CSS xác định có chứa các giá trị cụ thể sẽ được sử dụng lại trong toàn bộ tài liệu. Chúng được đặt bằng cách sử dụng ký hiệu thuộc tính tùy chỉnh [e. g. ,

:root {
  --main-bg-color: brown;
}

5] và được truy cập bằng hàm

:root {
  --main-bg-color: brown;
}

6 [e. g. ,

:root {
  --main-bg-color: brown;
}

Các trang web phức tạp có lượng CSS rất lớn, thường có nhiều giá trị lặp lại. Ví dụ: cùng một màu có thể được sử dụng ở hàng trăm nơi khác nhau, yêu cầu tìm kiếm toàn cầu và thay thế nếu màu đó cần thay đổi. Thuộc tính tùy chỉnh cho phép một giá trị được lưu trữ ở một nơi, sau đó được tham chiếu ở nhiều nơi khác. Một lợi ích bổ sung là định danh ngữ nghĩa. Ví dụ:

:root {
  --main-bg-color: brown;
}

8 dễ hiểu hơn

:root {
  --main-bg-color: brown;
}

9, đặc biệt nếu cùng màu này cũng được sử dụng trong các ngữ cảnh khác

Các thuộc tính tùy chỉnh tuân theo tầng và kế thừa giá trị của chúng từ cấp độ gốc của chúng

sử dụng cơ bản

Việc khai báo thuộc tính tùy chỉnh được thực hiện bằng cách sử dụng tên thuộc tính tùy chỉnh bắt đầu bằng dấu gạch ngang kép [

.hero-wrapper {
  --display-moon: none;
}

10] và giá trị thuộc tính có thể là bất kỳ giá trị CSS hợp lệ nào. Giống như bất kỳ thuộc tính nào khác, thuộc tính này được viết bên trong một bộ quy tắc, như vậy

.hero-wrapper {
  --display-moon: none;
}

Lưu ý rằng bộ chọn được cung cấp cho bộ quy tắc xác định phạm vi mà thuộc tính tùy chỉnh có thể được sử dụng trong. Một phương pháp hay nhất phổ biến là xác định các thuộc tính tùy chỉnh trên lớp giả

.hero-wrapper {
  --display-moon: none;
}

11 để nó có thể được áp dụng trên toàn cầu trên tài liệu HTML của bạn

:root {
  --main-bg-color: brown;
}

Tuy nhiên, điều này không phải lúc nào cũng đúng. bạn có thể có lý do chính đáng để giới hạn phạm vi thuộc tính tùy chỉnh của mình

Ghi chú. Tên thuộc tính tùy chỉnh có phân biệt chữ hoa chữ thường —

.hero-wrapper {
  --display-moon: none;
}

12 sẽ được coi là thuộc tính tùy chỉnh riêng biệt đối với

.hero-wrapper {
  --display-moon: none;
}

Như đã đề cập trước đó, bạn sử dụng giá trị thuộc tính tùy chỉnh bằng cách chỉ định tên thuộc tính tùy chỉnh của mình bên trong hàm

:root {
  --main-bg-color: brown;
}

6, thay cho giá trị thuộc tính thông thường

.hero-wrapper {
  --display-moon: none;
}

Các bước đầu tiên với thuộc tính tùy chỉnh

Hãy bắt đầu với CSS này áp dụng cùng một màu cho các thành phần của các lớp khác nhau

.hero-wrapper {
  --display-moon: none;
}

Chúng tôi sẽ áp dụng nó cho HTML này

getComputedStyle[document.querySelector['.hero-wrapper']]
  .getPropertyValue['--display-moon'];

Điều này tạo ra kết quả sau

Sử dụng. lớp giả gốc

Lưu ý CSS lặp đi lặp lại trong ví dụ trên. Màu nền được đặt thành

.hero-wrapper {
  --display-moon: none;
}

15 ở một số nơi. Đối với một số khai báo CSS, có thể khai báo điều này cao hơn trong tầng và để tính kế thừa CSS giải quyết vấn đề này một cách tự nhiên. Đối với các dự án không tầm thường, điều này không phải lúc nào cũng có thể. Bằng cách khai báo một thuộc tính tùy chỉnh trên lớp giả

.hero-wrapper {
  --display-moon: none;
}

11 và sử dụng nó khi cần trong toàn bộ tài liệu, tác giả CSS có thể giảm bớt nhu cầu lặp lại

getComputedStyle[document.querySelector['.hero-wrapper']]
  .getPropertyValue['--display-moon'];

getComputedStyle[document.querySelector['.hero-wrapper']]
  .getPropertyValue['--display-moon'];

Điều này dẫn đến kết quả giống như ví dụ trước, nhưng cho phép một khai báo chính tắc về giá trị thuộc tính mong muốn;

Kế thừa các thuộc tính tùy chỉnh

Thuộc tính tùy chỉnh kế thừa. Điều này có nghĩa là nếu không có giá trị nào được đặt cho một thuộc tính tùy chỉnh trên một phần tử nhất định, thì giá trị của phần tử gốc sẽ được sử dụng. Lấy HTML này

getComputedStyle[document.querySelector['.hero-wrapper']]
  .getPropertyValue['--display-moon'];

… với CSS sau

getComputedStyle[document.querySelector['.hero-wrapper']]
  .getPropertyValue['--display-moon'];

Trong trường hợp này, kết quả của

.hero-wrapper {
  --display-moon: none;
}

17 là

Đối với phần tử

.hero-wrapper {
  --display-moon: none;
}

18.

.hero-wrapper {
  --display-moon: none;
}

Đối với phần tử

.hero-wrapper {
  --display-moon: none;
}

90.

.hero-wrapper {
  --display-moon: none;
}

Đối với phần tử

.hero-wrapper {
  --display-moon: none;
}

92.

.hero-wrapper {
  --display-moon: none;
}

19 [được thừa kế từ cha mẹ của nó]

Đối với phần tử
```
.hero-wrapper {
  --display-moon: none;
}
```
94. giá trị không hợp lệ, là giá trị mặc định của bất kỳ thuộc tính tùy chỉnh nào

Hãy nhớ rằng đây là các thuộc tính tùy chỉnh, không phải các biến thực tế như bạn có thể tìm thấy trong các ngôn ngữ lập trình khác. Giá trị được tính khi cần thiết, không được lưu trữ để sử dụng trong các quy tắc khác. Ví dụ: bạn không thể đặt thuộc tính cho một phần tử và mong muốn truy xuất thuộc tính đó theo quy tắc con cháu của anh chị em. Thuộc tính chỉ được đặt cho bộ chọn phù hợp và hậu duệ của nó, giống như bất kỳ CSS thông thường nào

Giá trị dự phòng thuộc tính tùy chỉnh

Sử dụng hàm

:root {
  --main-bg-color: brown;
}

6, bạn có thể xác định nhiều giá trị dự phòng khi biến đã cho chưa được xác định;

Ghi chú. Các giá trị dự phòng không được sử dụng để khắc phục sự tương thích của trình duyệt. Nếu trình duyệt không hỗ trợ thuộc tính tùy chỉnh CSS, thì giá trị dự phòng sẽ không hữu ích. Nó chỉ là bản sao lưu cho trình duyệt hỗ trợ các thuộc tính tùy chỉnh CSS để chọn một giá trị khác nếu biến đã cho không được xác định hoặc có giá trị không hợp lệ

Đối số đầu tiên của hàm là tên của thuộc tính tùy chỉnh sẽ được thay thế. Đối số thứ hai của hàm, nếu được cung cấp, là một giá trị dự phòng, được dùng làm giá trị thay thế khi thuộc tính tùy chỉnh được tham chiếu không hợp lệ. Hàm chỉ chấp nhận hai tham số, chỉ định mọi thứ sau dấu phẩy đầu tiên làm tham số thứ hai. Nếu tham số thứ hai đó không hợp lệ, dự phòng sẽ không thành công. Ví dụ

const initialDarkMode =
  getComputedStyle[document.querySelector['.hero-wrapper']]
    .getPropertyValue['--display-moon'] === 'block';

Bao gồm một thuộc tính tùy chỉnh làm dự phòng, như đã thấy trong ví dụ thứ hai ở trên, là cách chính xác để cung cấp nhiều hơn một dự phòng. Kỹ thuật này đã được coi là gây ra các vấn đề về hiệu suất vì phải mất nhiều thời gian hơn để phân tích các biến

Ghi chú. Cú pháp của dự phòng, giống như cú pháp của thuộc tính tùy chỉnh, cho phép dấu phẩy. Ví dụ:

.hero-wrapper {
  --display-moon: none;
}

96 xác định giá trị dự phòng của

.hero-wrapper {
  --display-moon: none;
}

97 — bất kỳ giá trị nào nằm giữa dấu phẩy đầu tiên và phần cuối của hàm đều được coi là giá trị dự phòng

Xử lý thuộc tính tùy chỉnh không hợp lệ

Mỗi thuộc tính CSS có thể được gán một bộ giá trị xác định. Nếu bạn cố gán một giá trị cho một thuộc tính nằm ngoài tập hợp các giá trị hợp lệ của thuộc tính đó, thì thuộc tính đó được coi là không hợp lệ

Khi trình duyệt gặp một giá trị không hợp lệ cho một thuộc tính bình thường, nó sẽ loại bỏ giá trị đó và các phần tử được gán các giá trị mà chúng sẽ có nếu khai báo đơn giản là không tồn tại

Tuy nhiên, khi các giá trị của thuộc tính tùy chỉnh được phân tích cú pháp, trình duyệt vẫn chưa biết chúng sẽ được sử dụng ở đâu, do đó, nó phải coi gần như tất cả các giá trị là hợp lệ

Thật không may, những giá trị hợp lệ này có thể được sử dụng, thông qua ký hiệu chức năng

:root {
  --main-bg-color: brown;
}

6, trong ngữ cảnh mà chúng có thể không có ý nghĩa. Các thuộc tính và biến tùy chỉnh có thể dẫn đến các câu lệnh CSS không hợp lệ, dẫn đến khái niệm mới về tính hợp lệ tại thời điểm tính toán

Khi trình duyệt gặp sự thay thế

:root {
  --main-bg-color: brown;
}

6 không hợp lệ, thì giá trị ban đầu hoặc giá trị kế thừa của thuộc tính được sử dụng

Hai ví dụ tiếp theo minh họa điều này

Thuộc tính bình thường không hợp lệ

Trong ví dụ này, chúng tôi cố gắng áp dụng giá trị

getComputedStyle[document.querySelector['.hero-wrapper']]
  .getPropertyValue['--display-moon'];

00 cho thuộc tính

getComputedStyle[document.querySelector['.hero-wrapper']]
  .getPropertyValue['--display-moon'];

01. Bởi vì điều này không hợp lệ, CSS bị loại bỏ và kết quả là như thể quy tắc không tồn tại, do đó, quy tắc

getComputedStyle[document.querySelector['.hero-wrapper']]
  .getPropertyValue['--display-moon'];

02 trước đó được áp dụng thay thế và đoạn văn có màu xanh lam

HTML

:root {
  --main-bg-color: brown;
}

CSS

:root {
  --main-bg-color: brown;
}

Kết quả

Thuộc tính tùy chỉnh không hợp lệ

Ví dụ này giống như ví dụ trước, ngoại trừ việc chúng tôi sử dụng thuộc tính tùy chỉnh

Theo dự kiến, trình duyệt thay thế giá trị của

getComputedStyle[document.querySelector['.hero-wrapper']]
  .getPropertyValue['--display-moon'];

03 ở vị trí của

getComputedStyle[document.querySelector['.hero-wrapper']]
  .getPropertyValue['--display-moon'];

04, nhưng

getComputedStyle[document.querySelector['.hero-wrapper']]
  .getPropertyValue['--display-moon'];

00 không phải là giá trị thuộc tính hợp lệ cho

getComputedStyle[document.querySelector['.hero-wrapper']]
  .getPropertyValue['--display-moon'];

01. Sau khi thay thế, tài sản không có ý nghĩa. Trình duyệt xử lý tình huống này theo hai bước

Làm cách nào để lấy giá trị biến CSS trong JavaScript?

Phương thức getComputingStyle[] cung cấp một đối tượng bao gồm tất cả các kiểu được áp dụng cho phần tử đích. phương thức getPropertyValue[] được sử dụng để lấy thuộc tính mong muốn từ các kiểu được tính toán. setProperty[] dùng để thay đổi giá trị của biến CSS .

Làm cách nào để khai báo các biến CSS trong JavaScript?

Để đặt giá trị của biến CSS bằng JavaScript, bạn sử dụng setProperty trên thuộc tính style của documentElement . tài liệu. tài liệuElement. Phong cách.

Làm cách nào để chuyển giá trị từ js sang CSS?

Bạn có thể dễ dàng đọc các giá trị truy vấn phương tiện CSS vào JS bằng cửa sổ. matchMedia. Tuy nhiên, đôi khi bạn muốn chuyển thông tin từ biến JS sang CSS hoặc yêu cầu Biến CSS được đọc vào JS. Để đặt Biến CSS trên một phần tử, bạn có thể sử dụng thuộc tính style .

Var[] trong CSS là gì?

var[] Hàm CSS var[] có thể được sử dụng để chèn giá trị của thuộc tính tùy chỉnh [đôi khi được gọi là "biến CSS"] thay vì bất kỳ phần nào của giá trị . .

Một điều cuối cùng

sử dụng cơ bản

Các bước đầu tiên với thuộc tính tùy chỉnh

Sử dụng. lớp giả gốc

Kế thừa các thuộc tính tùy chỉnh

Giá trị dự phòng thuộc tính tùy chỉnh

Xử lý thuộc tính tùy chỉnh không hợp lệ

Thuộc tính bình thường không hợp lệ

HTML

CSS

Kết quả

Thuộc tính tùy chỉnh không hợp lệ

Làm cách nào để lấy giá trị biến CSS trong JavaScript?

Làm cách nào để khai báo các biến CSS trong JavaScript?

Làm cách nào để chuyển giá trị từ js sang CSS?

Var[] trong CSS là gì?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề