为什么这段代码中用js修改css样式中的display属性却不成功？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{
marign: 0;
padding: 0;
}
.box{
width: 500px;
height: 100px;
margin: 0 auto;
}
li{
width: 50px;
height: 30px;
border: solid #000 1px;
float: left;
list-style: none;
margin-right: 15px;
}
.showmenu{
border: #000 solid 1px;
width: 200px;
display: none;
}
</style>
<script>
function getByClass(cls){
var eles = [];
var elements = document.getElementsByTagName('*');
for(var i = 0; i < elements.length; i++){
if(elements[i].className == cls){
eles.push(elements[i]);
}
}
return eles;
}
window.onload = function(){
var s = getByClass('li');
s.onmouseover = changeshow;
s.onmouseout = noneshow;
}
function changeshow(){
var p = getByClass('showmenu');
p.style.display = "";
}
function noneshow(){
var p = getByClass('showmenu');
p.style.display = "none";
}
</script>
</head>
<body>
<div class="box">
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
</ul>
</div>
<div class="showmenu">
<div class="show1">
鼠标经过li标签后应该显示的
</div>
</div>
</body>
</html>
Kikiy_y4回答
-
MarlboroKay
首先，你的代码var s = getByClass('li');中存在问题，因为html结构中没有为 li 的样式，这直接导致你的功能无法运行。其次，你在css中已经书写了display的效果，js中只用去修改对应得className即可，不用这么复杂。望采纳，谢谢 -
七彩方糖
script的东西 放最后面吧，一般新手都是死在这个上。 -
redrain_lin
因为你压根没有获取到对象，事件绑定不上。还有就是你绑定的是个对象集合，不是对象。
随时随地看视频慕课网APP
Html/CSS
JavaScript