根据 CSS class 名称设置背景颜色

Question

我有这些不同的 div 元素 class，例如 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 元素的背景颜色设置为其 class 名称。因此，如果 class 名称为 red，我希望 div 背景为红色。我不确定是否需要添加 javascript 或其他内容。我看过 this，这根本不是我想要的。

提前致谢！

Answer 1

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

记住只有当颜色 class 是列表中的第二个 class 时，此特定解决方案才有效。

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

例如：

$(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>

Answer 2

动态且不依赖于 class 名称的解决方案是使用自定义 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>

Answer 3

获取所有.color_box-元素
对于每个：
1. 查找class-name，即不是color_box
2. 将背景颜色设置为找到 class-名称

不需要 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>

Answer 4

如果您使用 SASS 预处理器，则在没有 JavaScript 的情况下解决此问题的另一种方法是使用 @each 规则。

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

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

Demo

根据 CSS class 名称设置背景颜色

Set background color based on a CSS class name

javascript

html

css

colors

background-color