Kevin Powell - Community•2y ago

Filter

Why won't this work? Only the opacity has been changed. Do I need to create separate lines for each aspect of the filter I want to change? Can I not change more than one aspect of the filter on an element? document.querySelector(".main-container").style.filter = "opacity(0.3)", "saturate(100%)", "hue-rotate(0deg)", "brightness(100%)", "contrast(100%)", "blur(5px)";

3 Replies

Electronic•2y ago

I think it's the comma

MarkBoots•2y ago

you can just make it 1 big string

document.querySelector(".main-container").style.filter = "opacity(0.3) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%) blur(5px)";

document.querySelector(".main-container").style.filter = "opacity(0.3) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%) blur(5px)";

but if you want to make it more clear. just add a class that contains this filter in css.

.custom-filter {
  filter: opacity(0.3) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%) blur(5px)
}

.custom-filter {
  filter: opacity(0.3) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%) blur(5px)
}

document.querySelector(".main-container").classList.add("custom-filter")

document.querySelector(".main-container").classList.add("custom-filter")

Spiritual TechOP•2y ago

Thanks! That worked, thanks!

Gaming

Programming

Filter