使用对象中定义的属性更改 CSS

Question

是否可以使用存储在 JS 对象中的 CSS 属性来动态设置元素样式？

例如，更改一个简单元素的width和：background<div>

<div id="box"></div>
<button id="btn">click me</button>

盒子最初的样式是：

div {
  background: grey;
  width: 100px;
  height: 100px;
}

单击按钮元素时，该框将重新设置样式，如下所示：

btn.addEventListener('click', () => {
  // Code to change box style here...
}

我已经看到了 的使用setAttribute('style', 'some style stuff here');，但是我开始明白，这将简单地替换与该元素关联的所有样式属性，而不是附加/更改 :-( 中定义的属性

我的目标是在 JS 对象中保存 CSS 属性，例如：

const myStyle = {
  'background': 'green',
  'width': '20px'
}

并将其应用到元素上。

我知道这可以通过将属性保存在另一个名为“.box-transform”之类的 CSS 类中，然后将其添加到元素的 classList 中来完成...但我想通过 JS 来完成此操作。

我最初的尝试是这样的：

btn.addEventListener('click', () => {
  for (let [key, val] of Object.entries(myStyle)) {
    console.log(`${key}: ${val}`)
  box.setAttribute('style', `${key}: ${val}`)
}
});

然而，我遇到了一个压倒性的问题setAttribute......

<div id="box"></div>
<button id="btn">click me</button>

div {
  background: grey;
  width: 100px;
  height: 100px;
}

btn.addEventListener('click', () => {
  // Code to change box style here...
}

Answer 1

const btn = document.getElementById('btn');
const box = document.getElementById('b');

const myobj = {
  'width': '200px',
  'background': 'yellow'
};

btn.addEventListener('click', () => {
  for (let [key, val] of Object.entries(myobj)) {
    box.style[key] = val;
  }
});

.box {
  width: 300px;
  height: 300px;
  background: grey;
}

<div class="box" id="b"></div>
<button id="btn">click</button>