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!

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!

• javascript
• html
• css
• colors
• background-color

• Will class only have those two classes (color_box and the color)? – Oskar Grosser Commented Apr 14, 2021 at 21:32
• How should this be any different than using style="background-color: red" as an attribute? – Emiel Zuurbier Commented Apr 14, 2021 at 21:34
• @OskarGrosser yes – Kian Commented Apr 14, 2021 at 21:43
• @EmielZuurbier because with style="background-color: red", I would have to go through every color that I wanted. (. . . background-color: red . . . background-color: blue etc.) Does that makes sense? – Kian Commented Apr 14, 2021 at 21:44
• Hey @Kian now that I see the accepted answer it makes sense what you want, but my suggestion is to be more clear and concise about what you're looking for - people are kinda sensitive on here lol :) – kawnah Commented Apr 14, 2021 at 21:50

4 Answers 4

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>

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

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./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>

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>