使用JavaScript对象更改element.style [英] Change element.style with JavaScript object

问题描述

首先，此问题有很多重复项，但这些答案并不能提供更深入的见识。

First, there are many duplicates for this question but those answers don't give deeper insights.

第一季度。为什么会产生200,0？

Q1. Why this results in 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 为只读，因此我希望设置一个对象时应该静默失败，因此我希望输出为

I suspect el.style to be read-only , so I expect setting an object should silently fail and therefore I expect the output to be

第一个：： 200，第二个：： 200

但它是：

第一位：： 200，第二位：： 0

为什么？

第二季度。为什么使用Object.assign设置el.style起作用？

Q2. Why setting el.style using Object.assign works ?

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

有人可以用一些更深刻的见解解释我吗？

Can someone please explain me with some deeper insights?

推荐答案

第一个问题：

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

MDN says that although the style object is read-only, FF, Chrome and Opera do allow assignments to it (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style). Now, the offsetHeight property is read-only (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight), so it appears that attempting to set the style is causing that property to be reset to zero since offsetHeight is calculated value, not one that is set explicitly, and your browser is actually allowing the setting of the style property (albeit incorrectly).

第二个问题：

Object.assign 起作用的原因直接写在Object.assign的文档中。 它不会替换对象，它会替换对象的可枚举的自身属性。来自： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

The reason why Object.assign works is written right into the documentation for Object.assign. It doesn't replace the object, it replaces the enumerable own properties of the object. From: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

目标对象中的属性将被
源中具有相同密钥的属性覆盖。后来的源属性将

"Properties in the target object will be overwritten by properties in the sources if they have the same key. Later sources' properties will similarly overwrite earlier ones.

Object.assign（）方法仅将可枚举的拥有属性
从源对象复制到目标对象。

The Object.assign() method only copies enumerable and own properties from a source object to a target object."

因此，您的第一次尝试：

So, in your first attempt:

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

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

You are attempting to replace the entire object, which fails, but Object.assign just copies properties, which succeeds.

这篇关于使用JavaScript对象更改element.style的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！