js "div变色" 的简单实例
js中鼠标触发事件的简单实例
??? 在这里用到了document 对象的两个事件 ：
?????? onmousemove：当用户将鼠标划过对象时触发。
???????onmouseout：当用户将鼠标指针移出对象边界时触发。
html?代码：
<!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=gb2312" /> <title>无标题文档</title> <style type="text/css"> #div1{ background-color:#FF0000; height:100px; width:200px; } #div2{ background-color: #000000; height:100px; width:200px; } #div3{ background-color: #003300; height:100px; width:200px; } </style> <script language="javascript"> function chang1(cor,hig){ var div1= document.getElementById("div1"); div1.style.backgroundColor=cor;div1.style.height=hig;}function chang2(cor,hig){ var div2= document.getElementById("div2"); div2.style.backgroundColor=cor;div2.style.height=hig;}function chang3(cor,hig){ var div3= document.getElementById("div3"); div3.style.backgroundColor=cor;div3.style.height=hig;} function changout1(cor,hig){ var div1= document.getElementById("div1"); div1.style.backgroundColor=cor;div1.style.height=hig; } function changout2(cor,hig){ var div2= document.getElementById("div2"); div2.style.backgroundColor=cor;div2.style.height=hig; } function changout3(cor,hig){ var div3= document.getElementById("div3"); div3.style.backgroundColor=cor;div3.style.height=hig; } </script></head><body> <div id ="div1" onmousemove="chang1('blue','200px')" onmouseout="changout1('#FF0000','100px')"> </div> <div id ="div2" onmousemove="chang2('pink','200px')" onmouseout="changout2('#000000','100px')"> </div> <div id ="div3" onmousemove="chang3('orange','200px')" onmouseout="changout3('#003300','100px')"> </div> </body></html>?