javascript - 为什么对象解构在风格上不起作用？

Question

HTML 元素是一个对象。风格也是一个对象。那么为什么这段代码不起作用呢？没有解构一切正常，所以这不是一个大问题，我只是想知道原因。

const changeColor = () => {
  const div = document.querySelector("div");
  let {color, background} = div.style;
  color = "red";
  background = "blue";
}

div{
  width: 300px;
  height: 150px;
  color: blue;
  background: red;
}

<div onClick = "changeColor()">
  <p>Example</p>
</div>

标签： javascripthtmlcss

Answer 1

解构只会创建新的局部变量，这意味着

let {color, background} = div.style

本质上等同于

let color = div.style.color
let background = div.style.background

如果你然后按照这些线

color = "red"
background = "blue"

您没有为任何东西分配新的对象属性，您只是为局部变量分配了新值。