使用 JavaScript 对象更改 element.style

Question

首先，这个问题有很多重复，但这些答案并没有提供更深入的见解。

一季度。为什么这会导致 200,0 ？

考虑这个片段：

var el = document.querySelector('#r');

console.log('First:: ' + el.offsetHeight);

el.style = {
  height: el.offsetHeight + 500 + 'px'
}

console.log('Second:: ' + el.offsetHeight);

<div id="r" style="height:200px;width:800px;overflow:auto;border:1px    solid;margin:20px;box-sizing:border-box"></div>

我怀疑el.style是只读的，所以我希望设置一个对象应该默默地失败，因此我希望输出是

First:: 200,Second:: 200

但它是：

First:: 200,Second:: 0

为什么 ？

Q2。为什么使用 Object.assign 设置 el.style 有效？

Object.assign(el.style,{
   height : el.offsetHeight + 500 
})

有人可以用更深入的见解解释我吗？

Answer 1

对于你的第一个问题：

MDN 表示，虽然该style对象是只读的，但 FF、Chrome 和 Opera 确实允许对其进行分配（https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style）。现在，该offsetHeight属性是只读的（https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight），因此似乎尝试设置style会导致该属性被重置为零因为offsetHeight是计算值，而不是明确设置的值，并且您的浏览器实际上允许设置样式属性（尽管不正确）。

对于你的第二个问题：

工作的原因Object.assign写在 Object.assign 的文档中。它不替换对象，它替换对象的可枚举属性。来自：https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

“如果目标对象中的属性具有相同的键，它们将被源中的属性覆盖。稍后源的属性将类似地覆盖先前的属性。

Object.assign() 方法仅将可枚举属性和自己的属性从源对象复制到目标对象。”

因此，在您的第一次尝试中：

el.style = {
  height: el.offsetHeight + 500 + 'px'
}

您试图替换整个对象，但失败了，但 Object.assign 只是复制了属性，这成功了。