Adding CSS in Javascript code?

Question

im trying to add a css class in my javascript code but when i preview it in the browser it dont seem to work

heres the code

<script>
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
  year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
  daym="0"+daym
var dayarray=newArray("Sunday","Monday","Tuesday","Wednesday","Thursday",
                      "Friday","Saturday")
var montharray=newArray("January","February","March","April","May","June",
                        "July","August","September","October","November",
                        "December")
document.write(""+dayarray[day]+" "+daym+" "+montharray[month]+" "+year+"")
    .className = 'bigdate';
</script>

Here's the CSS:

.bigdate{
  color:#03C;
}

document.write().classname doesn't make sense to me. Where do you have that from? — Pekka
– Pekka, Commented Feb 8, 2012 at 22:08
document.write doesn't return a node that can have a class added to it. — zzzzBov
– zzzzBov, Commented Feb 8, 2012 at 22:08
Instead of var year=mydate.getYear() if (year < 1000) year+=1900, you can use getFullYear(). — Mike Samuel
– Mike Samuel, Commented Feb 8, 2012 at 22:13

alex · Accepted Answer · 2012-02-08 22:09:32Z

6

That's not how document.write() works, it doesn't return a reference to the node(s) that it wrote.

Try...

document.write("<span class=\"bigdate\">"+dayarray[day]+" "+daym+" "+montharray[month]+" "+year+"</span>");

...or better still...

var span = document.createElement('span');
span.appendChild(document.createTextNode(dayarray[day]+" "+daym+" "+montharray[month]+" "+year+));
document.body.appendChild(span);

answered Feb 8, 2012 at 22:09

alex

492k205 gold badges890 silver badges992 bronze badges

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

1 Comment

Mike Samuel Over a year ago

+1 for "or better still..." that doesn't use a sledgehammer (authority-wise) to kill a gnat.

Rob W · Accepted Answer · 2012-02-08 22:10:20Z

1

You should not use document.write to update the document. Update the document by setting the innerHTML property, or appending an element.

<div id="my-element"></div>
<script>
....
var elem = document.getElementById('my-element');
elem.innerHTML = dayarray[day]+" "+daym+" "+montharray[month]+" "+year;
elem.className = 'bigdate';
</script>

className is a property which refers to the class attribute. document.write() has no return value, so no properties. Even if you want to use document.write(), then you have to use HTML tags, and add class="bigdate":

document.write('<div class="bigdate">' + ..... + '</div>');

answered Feb 8, 2012 at 22:10

Rob W

350k87 gold badges811 silver badges683 bronze badges

Comments

Diodeus - James MacFarlane · Accepted Answer · 2012-02-08 22:10:44Z

0

document.write(""+dayarray[day]+" "+daym+" "+montharray[month]+" "+year+"").className = 'bigdate';

Should be:

document.write("<div class='bigdate'>"+dayarray[day]+" "+daym+" "+montharray[month]+" "+year+"</div>").

You need to have an HTML element to have a class name.

answered Feb 8, 2012 at 22:10

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Collectives™ on Stack Overflow

Adding CSS in Javascript code?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related