我认为无法引用element.style.filter。
使用document.querySelector( element ).style.property = value;似乎100%有效。
然而，如果我将这些元素样式的属性放入一个变量中，并尝试设置一个值，这似乎总是失败的：
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>所以我的问题是如何将元素的样式放入变量中并将其设置为值？
(在这种特定情况下-如何使用div1Filter变量将div1的CSS过滤器值设置为blur( 0.25rem )(
var ref = element.style.filter // You are assigning the value of filter to ref, not assigning the property itself
但你当然可以指定这种参考：
var ref = element.style // this way your are refering to the style object inside element which houses the property filter you wanted
在对其采取措施之前：
ref.filter= 'blah blah'
看看这个例子：示例