Pregunta Aplicar dinámicamente filtro CSS


¿Cómo aplicar dinámicamente filtros CSS? He intentado lo siguiente para Chrome.

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

6
2018-02-13 08:44


origen


Respuestas:


Debes establecer un valor para el webkitFilter propiedad, no a la style objeto. Esta sintaxis trabajará:

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

Si no conoce el nombre de la propiedad de JavaScript, puede hacer referencia a ella por medio de una propiedad de CSS (como karaxuna sugirió, también funcionará)

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

9
2018-02-13 09:04



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

3
2018-02-13 08:48



Agrega ese filtro a una clase:

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

Y alternar esa clase:

image.classList.toggle('bright');

2
2018-02-13 08:47



1) Compruebe si el navegador admite filtros css (si es necesario)
2) Detectar si la propiedad "filtro" necesita proveedor en el navegador actual y guardarlo
3) Establecer el valor del filtro en formato:

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

o

el.style.vendorFilter = value;

Verifique una pequeña demostración para él: http://codepen.io/malyw/pen/EDnmt
También puedes encontrar una gran demostración que muestra los filtros css en acción: http://malyw.github.io/css-filters/


0
2018-05-19 07:15