Set background color based on a CSS class name

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!

Will `class` only have those two classes (`color_box` and the color)? — Oskar Grosser, Apr 14 '21 at 21:32
How should this be any different than using `style="background-color: red"` as an attribute? — Emiel Zuurbier, Apr 14 '21 at 21:34
@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, Apr 14 '21 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, Apr 14 '21 at 21:50
@Kian So now you will write `data-backgroundcolor="red" . . . data-backgroundcolor="yellow"` instead of `style="background-color: red"` lolll — Evik Ghazarian, Apr 14 '21 at 21:52

ptts · Accepted Answer · 2021-04-14T21:46:17.660

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>

edited Apr 14 '21 at 21:46

answered Apr 14 '21 at 21:39

ptts

664
8

This works just as well! Thank you! I'm just curious how this line of code works `el.style.backgroundColor = el.dataset.backgroundcolor`. Is it getting the tag(?) attached to an HTML element and then setting the background color to what's in the quotation marks? – Kian Apr 14 '21 at 21:49
Exactly. You can access any data attribute, which is any attribute prefixed by `data-`, using `element.dataset.your_custom_name`. You can read more about how data attributes work in the link I added. – ptts Apr 14 '21 at 21:53

score 1 · Answer 2 · answered Apr 26 '21 at 20:02

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

Evik Ghazarian · Answer 3 · 2021-04-14T21:39:34.033

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>

Okay, thank you! With this line of code, `var background = $(this).attr("class").split(" ")[1];`, is the `[1]` at the end saying to look at the second class? — Kian, Apr 14 '21 at 21:36
Yes `$(this).attr("class").split(" ")` will give you an array of class names for that element for example `["color_box","red"]`. Then `$(this).attr("class").split(" ")[0]` is `color_box` and `$(this).attr("class").split(" ")[1]` is `red` — Evik Ghazarian, Apr 14 '21 at 21:38
I recommand to not use JQuery if you not alredy have jquery on your app. You can easly create the same function using native javascript. — Melvynx, Apr 14 '21 at 21:40

score 0 · Answer 4 · answered Apr 14 '21 at 21:57

Get all .color_box-elements
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>

Set background color based on a CSS class name

4 Answers4

Linked