JS className问题

我真是搞不懂怎么会出错，对JS深深的绝望

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{width:200px;height:200px;background: yellow;border:5px red solid;
            .red{width:400px;height:400px;background: red;}
        </style>
        <script>
            window.onload=function(){
                var odiv=document.getElementById("div1");
                odiv.onmouseover=function(){
                    this.className='red'
                }
                odiv.onmouseout=function(){
                    this.display=''
                }
            }
        </script>
    </head>
    <body>
        <div id="div1"></div>
    </body>
</html>

我猜你是想问为什么没有现象出现对吧？

如果说你认真检查过你写的程序以及之后的运行情况，你会发现程序正确运行了，red这个class也加上去了，但是为什么div的形状没有发生改变？
由第一点可以确定程序是正常的，那么问题就可能会出在css上了。
认真观察html结构，你会发现，red这个class虽然加上的，但是它的样式都没有起作用，被#div1覆盖了。

那么，现在可以下结论了，你这个问题的本质是css样式优先级的问题，它的优先级是这样的：
!import > 内联样式 > 内部样式 > 外部样式
而在样式表内部，又有这样的优先级：
id选择器 > class选择器

明白了这个，你再看看你的css怎么写的，.red和#div1，谁的优先级高？

如果你想要在onmouseover的时候改变div的外表，那么此时明显应该使用优先级更高的内联样式，即直接修改display属性，而不是添加一个class。

理解出错编辑了...

div没写｝

是这个原因吗？一楼说的挺好的马上学习一下

【热门文章】