Thay đổi biến scss

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

Nội dung chính Hiển thị

• Thay đổi các biến bằng JavaScript
• Hỗ trợ trình duyệt
• Hàm css var[]
• Cài đặt và sử dụng các biến CSS
• Get the value of CSS variable
• Set value of CSS variable
• Các tính năng gần đây
• Tạo hiệu ứng cuộn thị sai với  
• Những bản demo đáng kinh ngạc
• Tạo hộp tắt lệnh với   . hình ảnh. hộp đèn
• Tôi có thể thay đổi các biến CSS bằng JavaScript không?
• Bạn có thể thao tác CSS với JavaScript không?
• Tôi có thể sử dụng các biến CSS trong SASS không?
• Làm thế nào để hiển thị biến JavaScript trong HTML Div?

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 thuộc về 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. Bộ chọn truy vấn ['. root'];
// Lấy phần tử gốc
var r = document. bộ chọn truy vấn ['. gốc'];

// Create a function to get a value variable myfunction_get[] {& nbsp; . " + rs. getPropertyValue ['-blue']];}
function myFunction_get[] {
  // ​​Lấy kiểu [thuộc tính và giá trị] cho thư mục gốc
  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; . Phong cách. SetProperty ['-Blue', 'LightBlue'];}
function myFunction_set[] {
  // ​​Đặt giá trị của biến --blue thành một giá trị khác [ . Phong cách. setProperty['--blue', 'lightblue'];
  r.style.setProperty['--blue', 'lightblue'];
}

Please tự mình thử »

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản đầu tiên của trình duyệt được hỗ trợ đầy đủ chức năng 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 hiệu miễn phí.

Ở đây, một biến CSS [công thức chính được gọi là thuộc tính tùy chỉnh CSS CSS]

:root {
  --mouse-x: 0px;
  --mouse-y: 0px;
}

Có thể 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"];
}];

That is all

Xem Biến CSS SET CSS với JavaScript của Chris Coyier [@Chriscoyier] trên CodePen

:root {
    --my-variable-name: #999999;
}

getComputedStyle[document.documentElement]
    .getPropertyValue['--my-variable-name']; // #999999

document.documentElement.style
    .setProperty['--my-variable-name', 'pink'];

Các tính năng gần đây

• Tạo hiệu ứng cuộn thị sai với  

  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 tắt lệnh với   . hình ảnh. hộp đèn

  Một trong những lý do khiến tôi yêu thích bộ công cụ Dojo là nó dường như có tất cả mọi thứ.   .