I'm going to apply all of these CSS effects to another image via JavaScript code by selecting images that have that CSS effect.

#grayscale { filter: grayscale(1); }

#sepia { filter: sepia(1); }

#invert { filter: invert(1); }

#blur { filter: blur(2px); }

#saturate { filter: saturate(2); }

#contrast { filter: contrast(2); }

With this code, the number of commands increases and I want to write much shorter:

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

Inside the event

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

};