CODEWITHSUNDEEP
javascriptjqueryhtmlcssvariables
Kainos
Kainos

Reputation: 13

How to add CSS styles to javascript

Quick disclaimer - I'm a javascript rookie. I'm looking at how to add CSS styling to a javascript variable. Here's a link to my code.

http://jsfiddle.net/Ehney/169/

What I'd like to do is be able to format the dynamic numbers in the counter. Here's the code I used to attempt to do that

var days = document.getElementById("days");
    days.style.color = "blue";

This isn't doing anything though. Please help me. I'd like to know how to add other formatting such as like font sizing too.

Please understand that I am able to add the styles to all of the javascript using the 'countdown' getElementById. But I would like to specifically target the variables. Help!!!

Upvotes: 1

Views: 3025

Answers (2)

Anubhav Chaudhary
Anubhav Chaudhary

Reputation: 133

You can do it in this way:

var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "strong { color: red }";
document.body.appendChild(css);

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Wrap the variables values in a span with id/class

document.getElementById('countdown').innerHTML = 'Days ' + 'Hours ' + 'Minutes ' + 'Seconds  </br> &nbsp <span id="days">' + days + '</span>&nbsp &nbsp &nbsp &nbsp<span id="hours">' + hours + '</span>&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp<span id="minutes">' + minutes + '</span> &nbsp &nbsp &nbsp &nbsp &nbsp<span id="seconds">' + seconds + '</span>';

then define css rules

#days {
    color: blue;
}

Demo: Fiddle

Upvotes: 1

Related Questions