2

I am making a monopoly board in which each block is an element. I need to make the blocks dull and bright based on different conditions. To change brightness I use filter property. The brightness will be changed dynamically so I need to change style.filter.

Now there are other properties like 'drop-shadow' which I want to be constant and I have used them in css file. But now the problem is that these both filters can't exist in one time. Is there any way to combine both style.filter and filter property in css.

document.querySelector('#test').style.filter = 'brightness(0.5)'
div{
  height:100px;
  width:100px;
  border:2px solid;
  background:orange;
  filter:drop-shadow(2px 4px 6px black);
  
}
<div id="test"></div>

In the above script I need to show both brightness and drop-shadow but only brightness is working.

Note: In the example I just told about two properties but in my real code there are more. I know this can be solved by creating a constant string for css properties and then each time concat it to style.filter. But I don't want that.

3 Answers 3

3

Use CSS variables:

document.querySelector('#test').style.setProperty("--b", "0.2");
div#test{
  height:100px;
  width:100px;
  border:2px solid;
  background:orange;
  filter:drop-shadow(2px 4px 6px black) brightness(var(--b,1)) blur(2px);
  
}
<div id="test"></div>

0
2

If you set a filter property, you rewrite all its string, not appending into it. So you need to make some variable to store all filter properties. It can be an array for exaple. Then push or splice your properties in that array, and update filter with the result. For example:

let arr = [];
arr.push('brightness(0.5)');
arr.push('drop-shadow(2px 4px 6px black)');

and then update filter property:

document.querySelector('#test').style.filter = arr.join(' ');

Another way is to write the function that will get filter string, convert it into an array, and then do the same thing as above.

To combine both CSS and element.style.filter, you can try something like this:

function addFilter( element, filterValue ){
    let prop = getComputedStyle( element ).getPropertyValue('filter');
    if( prop === 'none' ){
        element.style.filter = filterValue;
    } else {
        let arr = prop.split(' ');
        if( arr.includes(filterValue) ) return;
        arr.push(filterValue);
        element.style.filter = arr.join(' ');
    }

}

function removeFilter( element, filterValue ){
    let prop = getComputedStyle( element ).getPropertyValue('filter');
    if( prop === 'none' ) return;
    let arr = prop.split(' '),
        index = arr.indexOf(filterValue)
    if( index !== -1 ) arr.splice( index, 1 );
    element.style.filter = arr.join(' ');
}
4
  • Thanks for your answer. But I have mention is the question that I don't want to combine the strings and then set it style.filter. I want any interior way which could combine style.filter and the css property filter
    – Maheer Ali
    Aug 17, 2019 at 7:17
  • Properties from CSS and from element.style are not combining. Because they are calculated based on their strength. element.style is more powerful. You can get previous property (that is from CSS) before applying element.style, combine them in array, and then set into element.style.
    – Trop
    Aug 17, 2019 at 7:23
  • Edited, try this.
    – Trop
    Aug 17, 2019 at 7:33
  • Your answer is correct but the problem is I want to use some any animations too. In which I can't only use style.filter. But thanks for your effort +1.
    – Maheer Ali
    Aug 17, 2019 at 8:31
1
function setBrightness( element, val ){
    let prop = getComputedStyle( element ).getPropertyValue('filter');
    if( prop === 'none' ) prop = 'brightness(1)';
    prop = prop.replace( /brightness\(\d+(\.\d+)?\)/g, `brightness(${val})` );
    element.style.filter = prop;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.