使用JavaScript对象更改element.style

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

问题1。为什么这会导致200,0

考虑一下这个片段：

var el=document.querySelector（'r'）；
console.log（'First:：'+el.offsetHeight）；
el.style={
高度：离地高度+500+‘像素’
}
console.log（'Second:：'+el.offsetHeight）
第一个问题：

MDN表示，尽管
样式
对象是只读的，但FF、Chrome和Opera确实允许对其进行赋值（）。现在，
offsetHeight
属性是只读的（），因此尝试设置
style
似乎会导致该属性重置为零，因为
offsetHeight
是计算值，而不是显式设置的值，并且您的浏览器实际上允许设置style属性（尽管不正确）

关于第二个问题：

Object.assign
有效的原因已写入Object.assign的文档中它不会替换对象，而是替换对象的可枚举自身属性。来自：

“目标对象中的属性将被中的属性覆盖
如果源具有相同的键，则返回源。稍后将返回源的属性
同样地，也覆盖了以前的

assign（）方法只复制可枚举和自己的属性
从源对象到目标对象。”

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

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

您试图替换整个对象，但失败了，但object.assign只复制属性，成功了。
问题在于此语句：

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

这不仅不起作用（如中所示，元素的CSS
height
未设置为
700px
），而且它还删除以前在元素上设置的所有内联样式（
style
属性）：


由于您的
是完全空的，所以它的高度将为零。这就是为什么
el.offsetHeight
在末尾返回
0
。
基于Chrome

当我们设置任何属性时，它会将其转发到
el.style.cssText
（参见规范）

上面写着[putforts=cssText]

因此，在分配字符串时

el.style = 'some valid css string'; 
// it takes the string and assigns to cssText 
el.style.cssText = 'some valid css string';

// So when assigning an object
el.style = {...}; 
// it takes the object and converts to string toString()
el.style.cssText = '[object Object]';
// Since it is not valid , it unsets everything

我查了一下这个，因为我有一系列的样式属性，我想改变它们，我想知道我是否可以使用一个对象来完成它，这样它看起来会更干净。
如果有人对这个问题感到好奇，并且会无意中发现，我的想法如下：

  var setStyle = { 
    zIndex: 10000,
    position: "absolute",
    top: somey,
    left: somex,
    opacity: 1,
    height: someh + "px",
    width: somew + "px"
  }
  for(let prop of Object.keys(setStyle)){
    elem.style[prop.toString()] = setStyle[prop.toString()];
  }

注意
el。样式
不是只读的。您可以使用它获取或设置元素的内联样式。访问
.style
属性将返回一个对象。该对象具有所有CSS属性。i、 e.
el.style.height='500px'
@ScottMarcus Check（第四）表示它是只读的，如果是，请更正wrong@ScottMarcus是的，我接受使用
el.style设置属性。[property]
应该可以工作，但是在将对象分配给
el.style
时失败。请检查此链接：-谢谢，我知道了。但Q1似乎是一场噩梦。。为什么它会导致0