Search code examples
javascripthtmlcssdomstyles

Changing style properties on a variable not working


Using document.querySelector( element ).style.property = value; seems to work 100% of the time.

However if I were to put this elements style properties into a variable and try to set a value - this always seems to fail:

let div1 = document.querySelector( 'div:nth-of-type( 1 )' );
let div1Filter = div1.style.filter;

div1Filter = 'blur( 0.25rem )'; //Why does this fail?

let div1 = document.querySelector( 'div:nth-of-type( 1 )' ),
    div2 = document.querySelector( 'div:nth-of-type( 2 )' ),
    div3 = document.querySelector( 'div:nth-of-type( 3 )' ),
    div4 = document.querySelector( 'div:nth-of-type( 4 )' );
    
let div1Filter = div1.style.filter;

div1Filter = 'blur( 0.25rem )'; //Why does this fail?

//div1.style.filter = 'blur( 0.25rem )';  //But this work?
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
div {
  position: absolute;
  border-radius: 1rem;
  width: 10rem;
  height: 10rem;
  background-color: #eee;
}
div ~ div {
  transform: scale( 0.8 );
  filter: brightness( 80% );
}
div ~ div ~ div {
  transform: scale( 0.6 );
  filter: brightness( 60% );
}
div ~ div ~ div ~ div {
  transform: scale( 0.4 );
  filter: brightness( 40% );
}
<div></div>
<div></div>
<div></div>
<div></div>

So my question is how can I put an element's style inside a variable and set it to a value?

( In this specific case - how can I set div1's CSS filter value to blur( 0.25rem ) using the div1Filter variable )


Solution

  • element.style.filter can't be referenced I believe.

    var ref = element.style.filter // You are assigning the value of filter to ref, not assigning the property itself
    

    But you can certainly assign this kind of reference:

    var ref = element.style // this way your are refering to the style object inside element which houses the property filter you wanted
    

    before doing something to it:

     ref.filter= 'blah blah'
    

    Look at this example: Example