javascript - JS className问题
本文介绍了javascript - 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
样式的问题。
具体来说是选择器优先级的问题,css的优先级是这样的:!import
> 内联样式
> 内部样式
> 外部样式
而在样式表内部,又有这样的优先级:id选择器
> class选择器
明白了这个,你再看看你的css怎么写的,.red
和#div1
,谁的优先级高?
如果你想要在onmouseover的时候改变div的外表,那么此时明显应该使用优先级更高的内联样式
,即直接修改display
属性,而不是添加一个class
。
这篇关于javascript - JS className问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文