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

Question

I have these different div elements with classes such as red or 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>

I want to set the background color of the div element to its class name. So if the class name is red , I would want the div background to be red. I'm not sure if I need to add javascript or something else. I've looked at this and it was not what I wanted at all.

Thank you in advance!

Answer 1

A solution that is dynamic and does not depend on class names is the use of a custom data attribute .

Take a look at the following solution:

 <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 2

An alternative way to approach this without JavaScript if you're using the SASS pre-processor would be to use an @each rule.

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

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

Demo

Answer 3

The solution below will get the color name in the class and set it to background color.

REMEMBER This specific solution will only works if the color class is the second class in the list.

var background = $(this).attr("class").split(" ")[1]; will give second class name in class names list.

For example:

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

and

$(this).attr("class").split(" ")[1] is 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 4

1. Get all .color_box -elements
2. For-each:
   1. Find class-name, that is not color_box
   2. Set background-color to found class-name

No need for jQuery or any other library! It's all native 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>