Question

我正在尝试为对象指定样式。初始代码是

targetEl.style.top = `${top}px` ;
targetEl.style.display = 'block';
targetEl.style.background = `url(${this.props.imgSrc}) no-repeat`;
targetEl.style.backgroundSize = "1800px 900px";

我尝试使用es6解构并重写了这样的代码：

targetEl.style = {...targetEl.style, 
                      top:`${top}px`, 
                      display: 'block', 
                      background: `url(${this.props.imgSrc}) no-repeat`, 
                      backgroundSize:  "1800px 900px" };

但由于某种原因，它似乎不起作用。我做错了什么？

Answer 1

您没有使用解构，您在对象文字中使用实验扩展语法来创建新对象。在使用不可变数据框架时，您可能习惯了这一点，但在这里您真的想要分配 targetEl.style CSS declaration object的属性。您不希望用新的{em>替换整个.style对象。

使用普通文字尝试Object.assign：

Object.assign(targetEl.style, {
    top: `${top}px`, 
    display: 'block', 
    background: `url(${this.props.imgSrc}) no-repeat`, 
    backgroundSize: '1800px 900px'
});

Answer 2

作为旁注，如果没有%%：

，效率会更高一些

Object.assign

但更有效的是一次性分配所有内容（How can I set multiple CSS styles in JavaScript?）：

const s = targetEl.style; 
s.top = `${top}px`; 
s.display = 'block'; 
s.background = `url(${this.props.imgSrc}) no-repeat`; 
s.backgroundSize = '1800px 900px';

es6对象解构不起作用

2 个答案: