CODEWITHSUNDEEP
jqueryhtmlcssdynamicless
Ashish Joshi
Ashish Joshi

Reputation: 311

Dynamically provide values to CSS

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.

Upvotes: 1

Views: 129

Answers (4)

antoni
antoni

Reputation: 5546

[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)

Upvotes: 0

Dejan.S
Dejan.S

Reputation: 19158

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

Upvotes: 0

Shrikant Mavlankar
Shrikant Mavlankar

Reputation: 1153

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>

Upvotes: 1

Cookie Ninja
Cookie Ninja

Reputation: 1182

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.

Upvotes: 0

Related Questions