Tự động áp dụng bộ lọc CSS

Question

Làm cách nào để áp dụng tự động các bộ lọc CSS? Tôi đã thử những điều sau đây cho Chrome.

image.style = "-webkit-filter: brightness(50%);"; 

Answer 1

Bạn nên thiết lập giá trị cho các webkitFilter bất động sản, không để các đối tượng style . Đây cú pháp will work:

image.style.webkitFilter = "brightness(50%)"; 

Nếu bạn không biết tên thuộc tính JavaScript, bạn có thể tham khảo nó bằng thuộc tính CSS (như karaxuna đề nghị, will work too):

image.style["-webkit-filter"] = "brightness(50%)"; 

Answer 2

Thêm bộ lọc vào một lớp:

.bright { 
    -webkit-filter: brightness(50%); 
} 

Và chuyển lớp:

image.classList.toggle('bright'); 

Answer 3

image.style["-webkit-filter"] = "brightness(50%)"; 

Answer 4

1) Kiểm tra xem trình duyệt hỗ trợ css -filters (nếu cần)
2) Phát hiện nếu "bộ lọc" tài sản cần nhà cung cấp trong trình duyệt hiện tại và lưu nó
3) Thiết lập giá trị bộ lọc trong định dạng:

el.style["-vendor-filter"] = value; 

hoặc

el.style.vendorFilter = value; 

Kiểm tra bản demo nhỏ cho nó: http://codepen.io/malyw/pen/EDnmt
Ngoài ra bạn có thể tìm thấy bản demo lớn cho thấy bộ lọc css trong hành động: http://malyw.github.io/css-filters/