Voy a aplicar todos estos efectos CSS a otra imagen a través del código JavaScript seleccionando imágenes que tengan ese efecto CSS.

#escala de grises { filtro: escala de grises(1); }

 #sepia { filter: sepia(1); } #invert { filter: invert(1); } #blur { filter: blur(2px); } #saturate { filter: saturate(2); } #contrast { filter: contrast(2); }

Con este código, la cantidad de comandos aumenta y quiero escribir mucho más corto:

 document.getElementById('#yourId').style.property = new style;

dentro del evento

 const handleFilter = (e) => { const { target } = e; const { id: filter } = target; // filter: "grayscale" | "sepia" | "invert" | "hue-rotate" | "contrast" | "saturate" | "blur" };