1.要出现的效果：不点击是绿色，移上就会变红色，点击就会变成红色，而且移上其他的框理也不变红色。移出还是绿色
<style type="text/css">#wai{width:50px;height:60px;}.li{width:50px;height:30px;background-color:#0F0;border:1px solid #F00;}</style><body> <div id="wai"> ???????<div class="li" onclick="Dian(this)" onmouseover="Yi(this)" onmouseout="Zou()">日本</div> ???????????????<div class="li" onclick="Dian(this)" onmouseover="Yi(this)" onmouseout="Zou()">韩国</div> ???????</div><script type="text/javascript">function Dian(a){ /*要出现的效果：不点击是绿色，移上就会变红色，点击就会变成红色，而且移上其他的框理也不变红色。移出还是绿色*/var li = document.getElementsByClassName("li");for( var i=0;i<li.length;i++){ li[i].removeAttribute ("bs") ; /* 清除他的属性的目的是让其点击的时候，这个属性在此函数中不起任何的作用*/li[i].style.backgroundColor = "#0F0";}a.setAttribute ("bs",1); ?/*bs想表示的是有没有选中*/a.style.backgroundColor = "red";}function Yi(b){ var li = document.getElementsByClassName("li");for( var i=0;i<li.length;i++){ if(li[i].getAttribute("bs")!= "1" ) ???/*已经点击一个框时，又移到别的框时，移上的时候给个判断，先获得bs这个属性，这个框依旧是绿色的。*/{ li[i].style.backgroundColor = "#0F0";}}b.style.backgroundColor = "red";}function Zou(){ var li = document.getElementsByClassName("li");for( var i=0;i<li.length;i++){ if(li[i].getAttribute("bs")!= "1" )/*如果不进行点击的话，移出时就恢复为以前的绿色，*/{ li[i].style.backgroundColor = "#0F0";}}}</script>效果的图：
总结：这个题里面涉及到的问题是，为何添加这个属性，如果单用点击事件和放上的话，放上时，确实都会变成红色，但是如果选中
一个，再放上其他的也会变红，想实现的效果是：不点击是绿色，移上就会变红色，点击就会变成红色，而且移上其他的框理也不变红色。移出还是绿色。不进行点击，就只执行放上和移出，点击了之后，屏蔽了移上和移出的功能，移出整个框
时点击的还是红色。
JS里DOM的实际操作
原文地址：http://www.cnblogs.com/zuo72/p/7742789.html