change css onload with javascript

Question

It's a simple javascript command to get the classname to change when the page loads. What am I doing wrong that it isn't working? http://jsfiddle.net/wtH2Y/4/

<html>
 <head>
 <style>
   .away {
        margin: 30px 0 0 0 !important;
        position:fixed;
        -webkit-transition: margin 0.6s;
        -moz-transition: margin 0.6s;
        -o-transition: margin 0.6s; 
   }
   .in {
        margin:0;
        position:absolute;
   }

 </style>
 <script>
     window.onload = function pre-loader() {
        document.getElementByClassName('away').className = 'in';
     };
 </script>
</head>

<div class="away">
this should slide up when the page loads
</div>

Blender · Accepted Answer · 2013-07-17 01:42:18Z

3

A few things:

Function names cannot have dashes in them. Rename your function.
If you're using a named function, I wouldn't assign it to a property this way. Either make it anonymous or assign it like so:
```
function foo() {
    ...
}

window.onload = foo;
```
Otherwise, you won't be able to call foo().
getElementByClassName should be getElementsByClassName (notice the s). Also, since it'll return a collection of elements, you will need to iterate over it with a for loop.

answered Jul 17, 2013 at 1:42

Blender

300k55 gold badges462 silver badges511 bronze badges

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

1 Comment

stevenspiel Over a year ago

good to know. I think I will just stick with getElementById. And thanks for catching the dash. smh

mohkhan · Accepted Answer · 2013-07-17 01:54:09Z

0

Because the function is document.getElementsByClassName and not document.getElementByClassName. It returns an Array. So you need to get the first element and apply the class. Like this...

document.getElementsByClassName('away')[0].className = 'in';

To make it simple, why don't you assign an id to the div

<div class="away" id="mydiv">

and then use document.getElementById. Like this...

document.getElementById('mydiv').className = 'in';

It is much simpler and easy to use.

edited Jul 17, 2013 at 1:54

answered Jul 17, 2013 at 1:40

mohkhan

12.3k2 gold badges27 silver badges27 bronze badges

3 Comments

stevenspiel Over a year ago

thank you! if your id is "mydiv" wouldn't you getElementById('mydiv')?

stevenspiel Over a year ago

I think I did everything you said but it still doesn't seem to work. jsfiddle.net/wtH2Y/6 any ideas?

mohkhan Over a year ago

I am sorry, I had provided the wrong id. Can you check my edited answer?

Collectives™ on Stack Overflow

change css onload with javascript

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related