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 )
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