更改变量的样式属性不起作用

Question

使用 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 ) ）

Answer 1

element.style.filter 我相信不能引用。

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'

看这个例子： Example

更改变量的样式属性不起作用

Changing style properties on a variable not working

html

javascript

css

dom

styles