Javascript 基于CSS类名设置背景色

我有这些不同的div元素和类，比如

red

或

green

我想将div元素的背景色设置为它的类名。因此，如果类名是红色的，我希望div背景是红色的。我不确定是否需要添加javascript或其他内容。我看过了，这根本不是我想要的

---

提前谢谢你

下面的解决方案将在类中获取颜色名称并将其设置为背景色

请记住仅当颜色类别是列表中的第二个类别时，此特定解决方案才有效

var background=$（this.attr（“class”）.split（“”[1]将在类名列表中给出第二个类名

例如：

$（this.attr（“class”）.split（“”[0]）
是
color\u框

及

$（this.attr（“class”）.split（“”[1]
是
红色


$（文档）.ready（函数（）{
$（“.color\u box”）。每个（函数（）{
var background=$（this.attr（“class”）.split（“”[1]；
$（this.css（“背景色”，背景）；
});
});
.color\u框{
显示：块；
宽度：100%；
高度：100px；
}
一种动态的、不依赖于类名的解决方案是使用自定义的

请看以下解决方案：



盒子
盒子
盒子
盒子
盒子
盒子
盒子
盒子
const colorboxs=document.queryselectoral（'.color_-box'）；
颜色框。forEach（el=>{
el.style.backgroundColor=el.dataset.backgroundColor
})

获取所有
.color\u框
-元素
对于每个：
查找类名，它不是
color\u框
将背景色设置为找到的类名

不需要jQuery或任何其他库！都是本地JavaScript


const colorboxs=document.queryselectoral（'.color_-box'）；
用于（让cb使用色盒）{
cb.style.backgroundColor=Object.values（cb.classList）.find（e=>e！='color_-box'）；
}
div.color\u框{
宽度：20px；
高度：20px；
}
如果您使用的是SASS预处理器，那么在不使用JavaScript的情况下，另一种方法是使用规则

将
class
仅包含这两个类（
color\u box
和颜色）？这与使用
style=“background color:red”
作为属性有什么区别？@OskarGrosseryes@EmielZuurbier因为有了
style=“background color:red”
，我就必须检查我想要的每种颜色。（
…背景色：红色
…背景色：蓝色
等）这有意义吗？嘿@Kian现在我看到了公认的答案，你想要什么就有意义了，但我的建议是更清楚、简洁地说明你在找什么-人们对这里有点敏感lol:）好的，谢谢！对于这行代码，
var background=$（this.attr（“class”）.split（“”[1]
，结尾的
[1]
是否表示要查看第二个类？是的
$（this）.attr（“class”）.split（“”）将为该元素提供一个类名数组，例如
[“color\u box”，“red”]
。然后
$（此）.attr（“类”）.split（“”[0]
是
color\u box
，
$（此）.attr（“类”）.split（“”[1]
是
red
如果你的应用程序上没有JQuery，我建议你不要使用JQuery。您可以轻松地使用本机javascript创建相同的函数。这同样有效！非常感谢。我只是好奇这行代码是如何工作的。是将标记（？）附加到HTML元素，然后将背景颜色设置为引号中的内容吗？没错。您可以使用
element.dataset.your_custom_name
访问任何数据属性，该属性是以
data-
为前缀的任何属性。在我添加的链接中，您可以阅读更多关于数据属性如何工作的信息。
$colors: red, orange, yellow, green, blue, purple, black, white;

@each $color in $colors {
    .bg-color-#{$color} {
        background-color: $color;
    }
}