change css onload with javascript

本文关键字：javascript with onload css change 更新时间：2023-09-26

这是一个简单的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>

几件事：

函数名称中不能有短划线。重命名您的函数
如果您使用的是命名函数，我不会以这种方式将其分配给属性。要么匿名，要么这样分配：
```
function foo() {
    ...
}
window.onload = foo;
```
否则，您将无法调用foo()。
getElementByClassName应该是getElementsByClassName（注意s）。此外，由于它将返回一个元素集合，因此需要使用for循环对其进行迭代

因为函数是document.getElementsByClassName而不是document.getElementByClassName。它返回一个数组。因此，您需要获得第一个元素并应用该类。像这样。。。

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

简单地说，为什么不给div 分配一个id呢

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

然后使用CCD_ 8。像这样。。。

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

它简单易用。