猿问

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>


慕神8447489
浏览 764回答 1
1回答

慕码人8056858

我猜你是想问为什么没有现象出现对吧?如果说你认真检查过你写的程序以及之后的运行情况,你会发现程序正确运行了,red这个class也加上去了,但是为什么div的形状没有发生改变?由第一点可以确定程序是正常的,那么问题就可能会出在css上了。认真观察html结构,你会发现,red这个class虽然加上了,但是它的样式都没有起作用,被#div1覆盖了。那么,现在可以下结论了,你这个问题的本质是css样式的问题。具体来说是选择器优先级的问题,css的优先级是这样的:!import&nbsp;>&nbsp;内联样式&nbsp;>&nbsp;内部样式&nbsp;>&nbsp;外部样式而在样式表内部,又有这样的优先级:id选择器&nbsp;>&nbsp;class选择器明白了这个,你再看看你的css怎么写的,.red和#div1,谁的优先级高?如果你想要在onmouseover的时候改变div的外表,那么此时明显应该使用优先级更高的内联样式,即直接修改display属性,而不是添加一个class。
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答