Dynamicznie zastosuj filtr CSS

Question

Jak dynamicznie stosować filtry CSS? Próbowałem następujących rzeczy w Chrome.

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

Answer 1

należy ustawić wartość nieruchomości webkitFilter, nie do obiektu style . Ta składnia will work:

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

Jeśli nie znasz JavaScript nazwę właściwości, można odwoływać się do niej przez własności CSS (jak karaxuna zasugerował, will work too):

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

Answer 2

Dodaj ten filtr do klasy:

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

i przełączniki tej klasy:

image.classList.toggle('bright'); 

Answer 3

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

Answer 4

1) Sprawdź, czy przeglądarka obsługuje css -filters (jeśli to konieczne)
2) Wykrywanie jeśli „filtr” własność musi dostawcą w bieżącej przeglądarki i zapisać go
3) została ustawiona wartość filtra w formacie:

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

lub

el.style.vendorFilter = value; 

Sprawdź małe demo dla niego: http://codepen.io/malyw/pen/EDnmt
Ponadto można znaleźć dużą demo pokazuje filtry css w akcji: http://malyw.github.io/css-filters/