日期:2014-05-16  浏览次数:20404 次

遇到一件很奇怪的事情,javascript
本帖最后由 kobecsb 于 2013-04-19 20:30:34 编辑
第一个问题:我的两个Class是这样定义的:
<style type="text/css">
   .edit {
                background:red;
   onmouseout: expression(onmouseout=function (){this.style.backgroundColor = 'red'}); 
   onmouseover: expression(onmouseover=function (){this.style.backgroundColor ='yellow'});
   }
   .spanStyle{
   onmouseout: expression(onmouseout=function (){this.style.backgroundColor ='AliceBlue'}); 
   onmouseover: expression(onmouseover=function (){this.style.backgroundColor ='yellow'});
   }
</style>    
本来的span的class 是spanStyle,鼠标指向它就变黄,移开就变aliceblue.一切正常
我要实现一个功能,可以让一个span的class变成edit,这样就可以鼠标指向它的时候变黄,移开就变红,
if(document.getElementById(num+"match").innerText != document.getElementById(num).innerText){
document.getElementById(num).className = "edit"; 
alert(document.getElementById(num).innerText);
alert(document.getElementById(num).className);
alert(num);
}
这一部分代码,都可以alert了,显示num的className 就是edit,可是没有任何效果,还是保持着spanStyle的样式。
真心求助

第二个问题:如果我想实现这样一个功能:对某个span的innerText进行修改,在修改之后,需要这个span立即改变样式,也就是它的class立刻改变成edit,请问这个该如何实现?十分感谢大家

------解决方案--------------------
样式和js 分开,方便以后的维护,试试这种方法:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
body,div{ margin:0px; padding:0px; }
.edit{width:200px; height:200px; background:red;}
.spanStyle{ background:AliceBlue}
</style>
<script>
function addColor(){
var edit = document.getElementById("editOne");

edit.className="edit";
edit.className= edit.className + ' spanStyle';
}
function delColor(){
var edit = document.getElementById("editOne");
edit.className = "edit";
}
</script>
</head>
 
<body>
<div class="edit" id="editOne" onmouseover="addColor()" onmouseout="delColor()">看我的变化</div>
</body>
</html>