Topics

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 Tech•2y ago

Thanks! That worked, thanks!

Kevin Powell - Community Join

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

34KMembers

View on Discord

Want results from more Discord servers?

Add your server

More Posts

Error concatenating strings in a for loopHello, I'm trying to generate a random string of length 12 ``` let id = ''; for(let i = 0; i <Understanding how development works ...Hi! This post is for me to understand the process of coding. I was in charge of administrating a w Getting the layouts correct with flex for each section.Having trouble seeing why my sections aren't lining up properly with flex. It seems I can get them t How do I access JSON arrays within array?```js fetch("./data.json") .then(function (response) { return response.json(); }) .then(function Can somebody tell me why image background is deformed in mobile view ? how can i fix it ?background image is deformed only in mobile view can somebody help me How do I load my main JavaScript AFTER JSON data was loaded?I have some event listener that are connected to elements that are loaded together with JSON data. H Adding assistive links to HeadingsIn a general content based website, I, for one, usually, find it handy to have an anchor to the head How do I center an img in an anchor?I have an icon that I want to put next to a button, but the thing is the icon doesn't want to center Why does react native uses your ipport but not localhost?Why does react native uses your ip:port but not localhost?How to make JS stop failing mocha automated tests. Works fine when tested manually.Attempting to make a basic JS function that greets the user, asks for their age, and determines birt