使用javascript onclick将classname添加到div

我想用javascript实现类似于当我点击任何一个缩略图（btn-1、btn-2和btn-3）时，应该将特定类动态添加到box div

我的代码：

document.getElementById（'btn-1'）。onclick=function（）{
document.getElementById（'box'）。className='bg-1'；
}

#框{
背景色：暗灰色；
宽度：200px；
高度：200px；
}
.缩略图{
宽度：30px；
高度：30px；
边框：1px实心；
保证金：5px；
位置：相对位置；
浮动：左；
}
#btn-1{
背景色：红色；
}
#btn-2{
背景颜色：绿色；
}
#btn-3{
背景颜色：蓝色；
}
.bg-1{
背景色：红色；
}
.bg-2{
背景颜色：蓝色；
}
.bg-3{
背景颜色：蓝色；
}

---

您的javascript正在工作，但您的CSS没有

你需要添加！对.bg-1、.bg-2和.bg-3的重要性如下

.bg-1 {
  background-color: red !important;
}

否则，id样式将优先于类样式

---

如果右键单击灰色div并选择inspect element in Chrome，您可以看到正在添加类名。

您想使用jquery.addClass（）函数：

$('.myButton').addClass('myNewClass');

该函数可能如下所示：

$(function () {
     $('.thumbnail').click(function() {
         $('#box').addClass($(this).attr('id'));
     });
})

---

您可以将所有缩略图作为一个数组获取，然后遍历该数组，并动态地向每个缩略图添加一个事件侦听器，单击时将所需的类名添加到框中：

var thumbnails = document.getElementsByClassName('thumbnail');

Array.from(thumbnails).forEach(function(thumbnail) {
    var id = thumbnail.id;
    thumbnail.addEventListener('click', function() {
        document.getElementById('box').className = id.replace('btn', 'bg')
    });
});

---

不要麻烦使用类，只需使用

data-

属性，如：

data bg=“#f00”

$（'[data bg]'）.css（'background'，function（）{
$（this）.on（'click'，（）=>$（'#box'）.css（'background'，this.dataset.bg））；
返回this.dataset.bg；
});
#框{
背景：暗射线；
宽度：120px；高度：120px；
}
[数据背景]{
宽度：30px；高度：30px；
保证金：5px；
浮动：左；
}

那么你的问题是什么？什么不起作用？很抱歉，现在已经解决了如何将渐变颜色与[数据颜色]结合使用？因为我试过了，但没用！我的渐变色：背景：#7F00FF；/*旧浏览器/背景的回退：-webkit线性渐变（向右，#E100FF，#7F00FF）；/Chrome 10-25，Safari 5.1-6/背景：线性渐变（向右，#E100FF，#7F00FF）；/W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+*/