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

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 (

html {
  --main-color: #06c
}

html {
  --main-color: #06c
}

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ả

html {
  --main-color: #06c
}

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

html {
  --main-color: #06c
}

html {
  --main-color: #06c
}

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;
}

html {
  --main-color: #06c
}

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

a {
  color: var(--main-color)
}

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

a {
  color: var(--main-color)
}

Đ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

html {
  --main-color: #06c
}

html {
  --main-color: #06c
}

a {
  color: var(--main-color)
}

a {
  color: var(--main-color)
}

Đ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

a {
  color: var(--main-color)
}

… với CSS sau

a {
  color: var(--main-color)
}

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

html {
  --main-color: #06c
}

• Đối với phần tử

  html {
    --main-color: #06c
  }
  

  28.

  html {
    --main-color: #06c
  }
  

  29
• Đối với phần tử

  a {
    color: var(--main-color)
  }
  

  00.

  a {
    color: var(--main-color)
  }
  

  01
• Đối với phần tử

  a {
    color: var(--main-color)
  }
  

  02.

  html {
    --main-color: #06c
  }
  

  29 (được thừa kế từ cha mẹ của nó)
• Đối với phần tử

  a {
    color: var(--main-color)
  }
  

  04. 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;
}

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ụ

a {
  color: var(--main-color)
}

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

a {
  color: var(--main-color)
}

a {
  color: var(--main-color)
}

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;
}

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

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

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ị

a {
  color: var(--main-color)
}

a {
  color: var(--main-color)
}

a {
  color: var(--main-color)
}

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

a {
  color: var(--main-color)
}

a {
  color: var(--main-color)
}

a {
  color: var(--main-color)
}

a {
  color: var(--main-color)
}

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

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

Làm cách nào để thêm thuộc tính CSS trong JavaScript?

Bạn có thể đặt CSS trong JavaScript không?

Làm cách nào để truy cập các biến sass trong JavaScript?