How to add CSS styles to javascript

Question

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!!!

Judging by your JSFiddle, there isn't actually an element called Days, which is why you can't assign a colour to it — scrowler
– scrowler, Commented Mar 12, 2014 at 1:00
You can see in this fiddle that by wrapping your desired text in a span with id="days" you can fix your problem: jsfiddle.net/Ehney/169 I would suggest using a class if you want to do this to the value as well as the Days label. — scrowler
– scrowler, Commented Mar 12, 2014 at 1:03

Arun P Johny · Accepted Answer · 2014-03-12 01:04:13Z

1

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

answered Mar 12, 2014 at 1:04

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kainos Over a year ago

Thank you, this worked well. I was able to add whatever CSS styles I wanted

Anubhav Chaudhary · Accepted Answer · 2014-03-12 04:04:38Z

0

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

answered Mar 12, 2014 at 4:04

Anubhav Chaudhary

1331 silver badge11 bronze badges

Collectives™ on Stack Overflow

How to add CSS styles to javascript

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related