根据 CSS 类名设置背景颜色答案

【问题标题】：Set background color based on a CSS class name根据 CSS 类名设置背景颜色
【发布时间】：2021-07-09 22:45:00
【问题描述】：

我有这些不同的 div 元素，它们具有 red 或 green 等类。

<div class="sidebar">
    <div class="color_box red"></div>
    <div class="color_box orange"></div>
    <div class="color_box yellow"></div>
    <div class="color_box green"></div>
    <div class="color_box blue"></div>
    <div class="color_box purple"></div>
    <div class="color_box black"></div>
    <div class="color_box white"></div>
</div>

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

提前谢谢你！

【问题讨论】：

class 是否只有这两个类（color_box 和颜色）？
这与使用style="background-color: red" 作为属性有何不同？
@OskarGrosser 是的
@EmielZuurbier 因为有了style="background-color: red"，我将不得不经历我想要的每一种颜色。（. . . background-color: red. . . background-color: blue 等）这有意义吗？
嘿@Kian 现在我看到了接受的答案，你想要什么是有道理的，但我的建议是更清楚和简洁地说明你在寻找什么 - 人们在这里有点敏感哈哈:)

标签： javascript html css colors background-color

【解决方案1】：

动态且不依赖于类名的解决方案是使用自定义data attribute。

看看下面的解决方案：

<div class="sidebar">
    <div data-backgroundcolor="red" class="color_box">BOX</div>
    <div data-backgroundcolor="orange" class="color_box">BOX</div>
    <div data-backgroundcolor="yellow" class="color_box">BOX</div>
    <div data-backgroundcolor="green" class="color_box">BOX</div>
    <div data-backgroundcolor="blue" class="color_box">BOX</div>
    <div data-backgroundcolor="purple" class="color_box">BOX</div>
    <div data-backgroundcolor="black" class="color_box">BOX</div>
    <div data-backgroundcolor="white" class="color_box">BOX</div>
</div>

<script>
    const colorboxes = document.querySelectorAll('.color_box');
    colorboxes.forEach(el => {
        el.style.backgroundColor = el.dataset.backgroundcolor
    })
</script>

【讨论】：

这同样有效！谢谢！我只是好奇这行代码是如何工作的el.style.backgroundColor = el.dataset.backgroundcolor。是否将标记（？）附加到 HTML 元素，然后将背景颜色设置为引号中的内容？
没错。您可以使用element.dataset.your_custom_name 访问任何数据属性，即任何以data- 为前缀的属性。您可以在我添加的链接中阅读有关数据属性如何工作的更多信息。

【解决方案2】：

如果您使用的是 SASS 预处理器，另一种不使用 JavaScript 的方法是使用 @each 规则。

$colors: red, orange, yellow, green, blue, purple, black, white;

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

Demo

【讨论】：

【解决方案3】：

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

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

var background = $(this).attr("class").split(" ")[1]; 将在类名列表中给出第二个类名。

例如：

$(this).attr("class").split(" ")[0] 是color_box

和

$(this).attr("class").split(" ")[1] 是red

$(document).ready(function(){
   $(".color_box").each(function(){
     var background = $(this).attr("class").split(" ")[1];
     $(this).css("background-color",background);
   });
});

.color_box {
display: block;
width: 100%;
height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
    <div class="color_box red"></div>
    <div class="color_box orange"></div>
    <div class="color_box yellow"></div>
    <div class="color_box green"></div>
    <div class="color_box blue"></div>
    <div class="color_box purple"></div>
    <div class="color_box black"></div>
    <div class="color_box white"></div>
</div>

【讨论】：

好的，谢谢！有了var background = $(this).attr("class").split(" ")[1];这行代码，最后的[1]是说看二等吗？
Yes $(this).attr("class").split(" ") 将为您提供该元素的类名数组，例如 ["color_box","red"]。那么$(this).attr("class").split(" ")[0] 是color_box 和$(this).attr("class").split(" ")[1] 是red
如果您的应用程序上还没有 jquery，我建议不要使用 JQuery。您可以使用本机 javascript 轻松创建相同的函数。

【解决方案4】：

获取所有.color_box-elements
对于每个：
1. 找到类名，不是color_box
2. 将背景颜色设置为找到的类名

不需要 jQuery 或任何其他库！都是原生 JavaScript！

const colorboxes = document.querySelectorAll('.color_box');

for (let cb of colorboxes) {
  cb.style.backgroundColor = Object.values(cb.classList).find(e => e != 'color_box');
}

div.color_box {
  width: 20px;
  height: 20px;
}

<div class="sidebar">
  <div class="color_box red"></div>
  <div class="color_box orange"></div>
  <div class="color_box yellow"></div>
  <div class="color_box green"></div>
  <div class="color_box blue"></div>
  <div class="color_box purple"></div>
  <div class="color_box black"></div>
  <div class="color_box white"></div>
</div>

【讨论】：