Question

这是一个简单的javascript命令，可以在页面加载时更改类名。我做错了什么不起作用？ 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>

Answer 1

一些事情：

函数名称中不能包含破折号。重命名你的功能。
如果您使用的是命名函数，我不会以这种方式将其分配给属性。要么匿名，要么像这样分配：
```
function foo() {
    ...
}

window.onload = foo;
```
否则，您将无法拨打foo()。
getElementByClassName应为getElementsByClassName（请注意s）。此外，由于它将返回一组元素，因此您需要使用for循环对其进行迭代。

Answer 2

因为该功能是document.getElementsByClassName而不是document.getElementByClassName。它返回一个数组。所以你需要获得第一个元素并应用该类。像这样......

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

为简单起见，为什么不为div指定一个id

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

然后使用document.getElementById。像这样......

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

它更简单易用。

使用javascript更改css onload

2 个答案: