Thay đổi các biến với JavaScript
Các biến CSS có quyền truy cập vào DOM, điều đó có nghĩa là bạn có thể thay đổi chúng bằng JavaScript.
Dưới đây là một ví dụ về cách bạn có thể tạo tập lệnh để hiển thị và thay đổi biến --Blue từ ví dụ được sử dụng trong các trang trước. Hiện tại, đừng lo lắng nếu bạn không quen thuộc với JavaScript. Bạn có thể tìm hiểu thêm về JavaScript trong hướng dẫn JavaScript của chúng tôi:
Thí dụ
// Nhận phần tử gốc r = document.QuerySelector [': root'];
// Get the root element
var r = document.querySelector[':root'];
// Tạo một hàm để nhận được một giá trị biến đổi myfunction_get [] {& nbsp; // Nhận các kiểu [thuộc tính và giá trị] cho root & nbsp; var rs = getComputedStyle [r]; & nbsp; // Thông báo giá trị của biến --Blue & nbsp; cảnh báo ["Giá trị của --Blue là:" + rs.getPropertyValue ['-blue']];}
function myFunction_get[] {
// Get the styles [properties and values] for the root
var rs = getComputedStyle[r];
// Alert the value of the --blue variable
alert["The value of --blue is: " + rs.getPropertyValue['--blue']];
}
// Tạo một hàm để thiết lập một giá trị biến đổi myFunction_set [] {& nbsp; // Đặt giá trị của biến --Blue thành một giá trị khác [trong trường hợp này là "lightBlue"] & nbsp; R.Style.SetProperty ['-Blue', 'LightBlue'];}
function myFunction_set[] {
// Set the value of variable --blue to another value [in this case "lightblue"]
r.style.setProperty['--blue', 'lightblue'];
}
Hãy tự mình thử »
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ chức năng var[]
.
var [] | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Hàm css var []
var [] | Hàm css var [] |
DigitalOcean cung cấp các sản phẩm đám mây cho mọi giai đoạn của hành trình của bạn. Bắt đầu với $ 200 trong tín dụng miễn phí!
Ở đây, một biến CSS [chính thức được gọi là thuộc tính tùy chỉnh CSS CSS]:
:root {
--mouse-x: 0px;
--mouse-y: 0px;
}
Có lẽ bạn sử dụng chúng để đặt một vị trí:
.mover {
left: var[--mouse-x];
top: var[--mouse-y];
}
Để cập nhật các giá trị đó từ JavaScript, bạn đã:
let root = document.documentElement;
root.addEventListener["mousemove", e => {
root.style.setProperty['--mouse-x', e.clientX + "px"];
root.style.setProperty['--mouse-y', e.clientY + "px"];
}];
Đó là tất cả.
Xem Biến CSS SET CSS với JavaScript của Chris Coyier [@Chriscoyier] trên CodePen.
Các biến CSS là một bổ sung rất đáng hoan nghênh cho ngôn ngữ, mặc dù chúng rất cơ bản. & NBSP; Chắc chắn chúng ta có thể sử dụng SASS hoặc Stylus nhưng các ngôn ngữ không bao giờ nên tin tưởng vào các nhà phát triển dựa vào các khung và bộ công cụ để thực hiện những gì chúng ta biết chúng ta cần. & NBSP; Và cũng giống như mọi phần khác của trang web, bạn có thể nhận và thao tác các giá trị biến CSS - hãy xem cách! Phương pháp truyền thống sử dụng các biến CSS gốc là thêm nó vào Cài đặt và sử dụng các biến CSS
root
:
:root { --my-variable-name: #999999; }
Đơn giản. & NBSP; Cũng nên nhớ rằng các biến CSS không có sức mạnh như các biến trong SASS, Stylus, v.v.
Nhận giá trị của biến CSS
Để truy xuất giá trị của biến CSS trong cửa sổ, bạn sử dụng ________ 8 & nbsp; và getPropertyValue
:
getComputedStyle[document.documentElement] .getPropertyValue['--my-variable-name']; // #999999
Giá trị biến được tính toán trở lại dưới dạng chuỗi.
Đặt giá trị của biến CSS
Để đặt giá trị của biến CSS bằng JavaScript, bạn sử dụng ____ 10 & nbsp; trên ____ 11 của ________ 12 & nbsp; thuộc tính:
document.documentElement.style .setProperty['--my-variable-name', 'pink'];
Bạn sẽ thấy ngay lập tức giá trị mới được áp dụng ở mọi nơi mà biến được sử dụng.
Tôi đã dự đoán sự cần thiết của các hack kinh tởm để thực hiện thao tác biến CSS với JavaScript vì vậy tôi rất vui vì nó dễ như mô tả ở trên!
Các tính năng gần đây
Tạo hiệu ứng parallax cuộn với & nbsp; CSS
Giới thiệu cho các trang web khá dài bây giờ với hiệu ứng "Parallax" được gọi là thực sự phổ biến. Trong trường hợp bạn chưa từng nghe về hiệu ứng này, về cơ bản, nó bao gồm các lớp hình ảnh khác nhau đang di chuyển theo các hướng khác nhau hoặc với tốc độ khác nhau. Điều này dẫn đến một ...
Những bản demo đáng kinh ngạc
Tạo hộp đèn võ đường với & nbsp; dojox.image.lightbox
Một trong những lý do tôi yêu thích bộ công cụ Dojo là nó dường như có tất cả mọi thứ. & nbsp; không có ai đang tìm kiếm một plugin từ trang web này và sau đó một plugin khác từ trang web đó để xây dựng ứng dụng của tôi. & nbsp; được chôn cất trong không gian tên
3 mở rộng của dojo là.mover { left: var[--mouse-x]; top: var[--mouse-y]; }