Dynamically provide values to CSS

Question

I am trying to set color of a div dynamically.

To give an overview of issue, let's check below things:

<!doctype html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="shape" id="shape1"></div>
    <div class="shape" id="shape2"></div>
    <div class="shape" id="shape3"></div>
</body>
</html>

Below is the CSS I am using:

.shape {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: #dfd;
  margin: 20px;
}

Is it possible that I can give class="shape-fdd" in html then it show light red color, if I give class="shape-dfd" then it show light green color?

I have just looked into LESS for the same but I don't know if it can provide this feature.

I don't look for jQuery solutions for this. Only CSS or with LESS or SASS if possible.

Any help is appreciated.

why not have a class of red and light green ready and just add or remove that class depending on situation? — guradio, Jul 30 '16 at 07:29
If you could update you question showing all the classes you write about. Neither `shape-fdd` nor `dfd` is in your question so it is very difficult to understand what you mean. — Asons, Jul 30 '16 at 08:17
What would trigger the dynamic part? Or do you just want to have them to have different colors? — Dejan.S, Jul 30 '16 at 09:13

Shrikant Mavlankar · Answer 1 · 2016-07-30T08:07:15.243

Using jquery and two different class you can achieve like this

HTML

<!doctype html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="shape-dfd" id="shape1"></div>
    <div class="shape-dfd" id="shape2"></div>
    <div class="shape-dfd" id="shape3"></div>
    <input type="button" id="classDfd" value="Add dfd class" />
    <input type="button" id="classFdd" value="Add fdd class" />
</body>
</html>

Style

.shape-dfd {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: #dfd;
  margin: 20px;
}
.shape-fdd {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: #fdd;
  margin: 20px;
}
</style>

Jquery

<script>
$(document).ready(function () {

   $("#classDfd").click(function(){

       $("div[id^='shape']").removeClass("shape-fdd");
       $("div[id^='shape']").addClass("shape-dfd");
   });

   $("#classFdd").click(function(){

       $("div[id^='shape']").removeClass("shape-dfd");
       $("div[id^='shape']").addClass("shape-fdd");
   });
});
</script>

score 0 · Answer 2 · answered Jul 30 '16 at 07:36

0

You can make a new class on your css and use it in your html.

.dfd {
    background: #dfd;
}

Then class="shape dfd" to apply the color of the .shape class.

Here's a working JsFiddle.

answered Jul 30 '16 at 07:36

Cookie Ninja

1,156
15
29

score 0 · Accepted Answer · edited May 23 '17 at 11:51

[Edited] since my answer has been accepted: I just want to highlight for later readers that the following won't work for now: this is not yet possible in css3 (only supported for content attribute right now) :)

Just a quick note for info. It is not yet possible in css3 (only for content attribute right now) but maybe soon:

<!doctype html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="shape" id="shape1" data-color="#fdd"></div>
    <div class="shape" id="shape2" data-color="#fdd"></div>
    <div class="shape" id="shape3" data-color="#fdd"></div>
</body>
</html>


.shape {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: attr(data-color);
  margin: 20px;
}

Can check on CSS - Add Color with a data attribute - attr(data-color color)

Dejan.S · Answer 4 · 2016-07-30T09:27:38.700

Depending on how you would like to set it dynamically, javascript/jQuery? I would start with this. Setting the colors in data-attributes and specifying them in your css, or just do plain classes depending on requirements of the dynamic part.

Something like

[data-color="blue"] {
  background-color: deepskyblue !important;
}

[data-color="red"] {
  background-color: tomato !important;
}

and your html would look like

<div class="shape" data-color="blue"></div>
<div class="shape" data-color="red"></div>

demo found at jsfiddle

EDIT If I got you right you want this. You would have to do a mixin or extend in SCSS (check syntax for LESS, jsfiddle only support SCSS hence I use it). You do a base class and then extend that with the color once, like this

   .shape {
        background-color: aqua;
        display: inline-block;
        height: 100px;
        width: 100px;
    }

    .shape-blue {
        @extend .shape;
        background-color: deepskyblue;
    }

    .shape-red {
        @extend .shape;
        background-color: tomato;
    }

demo on jsfiddle

Dynamically provide values to CSS

4 Answers4