Làm cách nào để đặt giá trị biến JavaScript trong CSS?
Kể từ năm 2016, Biến CSS hoàn toàn có thể sử dụng được trong Chrome và Firefox và IE cũng đã tuyên bố ý định triển khai nó Show Giống như nhiều tính năng JavaScript và CSS mới, có thể hơi khó để hình dung những gì bạn có thể cần hoặc sử dụng một biến CSS cho. Đối với hầu hết chúng ta, tất cả kinh nghiệm của chúng ta đều ở thế giới tiền biến, vì vậy không nhất thiết phải rõ ràng chúng ta có thể sử dụng chúng để làm gì. Tuy nhiên, chúng tôi đã tìm thấy một câu trả lời tuyệt vời, giao tiếp giữa JavaScript và CSS Biến CSS là gì?Biến CSS (spec) thêm hai khái niệm mới vào CSS. Giờ đây, bạn có thể xác định các thuộc tính tùy chỉnh bắt đầu bằng hai dấu gạch ngang ( 1)
Sau đó, bạn có thể sử dụng chúng với 2
Đối với bất kỳ ai quen thuộc với SASS hoặc một ngôn ngữ tương tự biên dịch thành CSS, lợi thế của điều này là rõ ràng, bạn có thể dễ dàng thay đổi màu sắc, kích thước, v.v. ở một địa điểm duy nhất Thật thú vị, các biến tuân theo cùng một quy tắc kế thừa của các thuộc tính CSS khác. Ví dụ: có lẽ chúng tôi muốn điều chỉnh màu chính trên blog của mình
Bất kỳ liên kết nào trong phần bài đăng trên blog của trang đó giờ sẽ có màu nâu khá khủng khiếp Kết hợp các biến CSS với các biểu thức 3 thật tuyệt vời
Biến CSS và JavaScriptGần đây, chúng tôi đã xem được polyfill thanh trượt của Lea Verou thể hiện cách sử dụng thú vị các Biến CSS để giao tiếp giữa JavaScript và CSS Trước đây, nếu bạn muốn kiểm soát CSS bằng một biến hoặc hàm trong JavaScript, tùy chọn duy nhất của bạn về cơ bản là viết CSS bằng JavaScript Tuy nhiên, đôi khi trong một số trường hợp nhất định, chẳng hạn như khi thiết kế trang web phản hồi hoặc tìm nạp một số dữ liệu nhất định từ cơ sở dữ liệu, bạn sẽ yêu cầu tìm nạp hoặc cập nhật giá trị của các biến CSS nhất định. Do đó, điều này có thể được thực hiện bằng cách sử dụng phương thức JavaScript getComputingStyle() và phương thức setProperty() Dưới đây chúng tôi đã trình bày với sự trợ giúp của một ví dụ về cách thay đổi các biến CSS bằng JavaScript Cách thay đổi các biến CSS thông qua JavaScriptVới mục đích hiểu cách thay đổi biến CSS bằng JavaScript, hãy xem xét một ví dụ HTML < p > Đây là một đoạn văn. < /p > We are creating a element to apply some styling to it using CSS variables and then creating two buttons to get and set CSS variables using JavaScript. CSS Bây giờ, trước hết, chúng ta đang tạo một số biến toàn cục trong. bộ chọn gốc và cung cấp cho họ một số giá trị :root { Bây giờ để sử dụng các biến này trên đoạn văn, hãy làm theo đoạn mã dưới đây p { Trong đoạn mã trên, chúng tôi đang cung cấp cho đoạn văn một số màu và sử dụng hàm var(), chúng tôi đang truy cập các biến CSS của mình để cung cấp họ phông chữ và kích thước phông chữ cho đoạn văn Bây giờ, chúng tôi muốn cập nhật giá trị của các biến CSS bằng JavaScript. Đây là cách bạn làm điều đó. Trong mã bên dưới, về cơ bản, chúng tôi đang tìm nạp cũng như cập nhật giá trị của biến –font-family JS var store = . Bộ chọn truy vấn('. root'); Trong đoạn mã trên, chúng tôi đang tạo một biến có tên “store” để lưu trữ tất cả các biến CSS được khai báo trong. bộ chọn gốc bằng phương thức querySelector() Sau đó, chúng tôi đang tạo một hàm “getfontfamily” để tìm nạp các biến ban đầu được lưu trong biến “store” bằng cách sử dụng phương thức getComputingStyle() và sau đó chúng tôi sẽ sử dụng hàm alert() để hiển thị giá trị ban đầu của biến tương ứng với Cuối cùng, chúng ta lại tạo một hàm khác “setfontfamily()” để thiết lập giá trị mới của biến –font-family sử dụng phương thức setProperty() đầu ra Đây là giao diện ban đầu của trang web của chúng tôi Nhấp vào nút nhận để lấy giá trị của họ phông chữ gốc Sau khi nhấp Họ phông chữ ban đầu là Times New Roman Để cập nhật họ phông chữ, nhấp vào nút đặt Sau khi nhấn vào nút Biến –font-family đã được cập nhật thành công thành “Verdana” Phần kết luậnVới mục đích tìm nạp hoặc cập nhật giá trị của một số biến CSS nhất định thông qua JavaScript, có hai phương thức khả dụng. Đầu tiên là phương thức getComputingStyle() để lấy giá trị của một biến, trong khi đó, để cập nhật giá trị của một biến bằng phương thức setProperty(). Thay đổi các biến CSS thông qua JavaScript rất hữu ích trong các tình huống chẳng hạn như khi thiết kế trang web phản hồi hoặc tìm nạp một số dữ liệu nhất định từ cơ sở dữ liệu. Hướng dẫn này thảo luận về cách thay đổi các biến này thông qua JavaScript với sự trợ giúp của một ví dụ phù hợp Làm cách nào để tham chiếu JavaScript trong CSS?Câu trả lời điển hình là. . Thêm mã JavaScript vào cuối thẻ |