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

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

例如，更改简单

元素的

宽度和
背景
：

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

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

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

我见过
setAttribute（'style'，'somestyle stuff here'）的用法，但我已经了解到，这将简单地替换与元素关联的所有样式属性，而不是附加/更改以下内容中定义的属性：-(

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

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

并将其应用于元素

我知道这可以通过在另一个名为“.box transform”的CSS类中保存属性，然后将其添加到元素的类列表中来实现……但我希望通过JS来实现

我最初的尝试大致如下：

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

然而，我遇到了
setAttribute
的覆盖性质问题


const btn=document.getElementById（'btn'）；
const box=document.getElementById（'b'）；
常数myobj={
“宽度”：“20px”，
“背景”：“黄色”
};
btn.addEventListener（'单击'，（）=>{
for（让Object.entries（myobj））的[key，val]{
log（`${key}:${val}`）
setAttribute（'style'，`${key}:${val}`）
}
})；
.box{
宽度：300px；
高度：300px；
背景：灰色；
}

单击
您可以首先将CSS生成为字符串，然后使用
cssText
属性：


const btn=document.getElementById（'btn'）；
const box=document.getElementById（'b'）；
常数myobj={
“宽度”：“20px”，
“背景”：“黄色”
};
btn.addEventListener（'单击'，（）=>{
var cssText=''；
for（让Object.entries（myobj））的[key，val]{
cssText+=`${key}:${val}；`
}
box.style.cssText=cssText；
})；
.box{
宽度：300px；
高度：300px；
背景：灰色；
}

单击
const btn=document.getElementById（'btn'）；
const box=document.getElementById（'b'）；
常数myobj={
“宽度”：“200px”，
“背景”：“黄色”
};
btn.addEventListener（'单击'，（）=>{
for（让Object.entries（myobj））的[key，val]{
box.style[key]=val；
}
})；
.box{
宽度：300px；
高度：300px；
背景：灰色；
}

单击
只需使用
box.style[key]=val；
（否则，解决方案将是将所有属性组合成一个CSS字符串，然后将其设置为
style
）啊，太棒了！我知道会是这样的。我尝试过
.style.${key}
像傻瓜一样…如果你发帖子作为答案，我会给你一些报应；-）仅供参考，我不会认出这些
（）=>{}
${key}
@AbhishekPandey这就是巴贝尔的目的；-）这回答了你的问题吗？这很有效，但是直接设置
框。样式[key]
更具可读性（和更好的练习）。@ChrisG，将此作为答案的一部分，谢谢：）答案显然很好，但由于这个问题是重复的，所以不要对其进行升级。
btn.addEventListener('click', () => {
  for (let [key, val] of Object.entries(myStyle)) {
    console.log(`${key}: ${val}`)
  box.setAttribute('style', `${key}: ${val}`)
}
});