上一篇JS教程学习了:Javascript初学者实例教程(10):图像属性
实例十一
本实例主要介绍了鼠标动作的使用,这个例子太简单了,可以多找点别点资料看看!
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>改变文字样式</title> <style type="text/css"> .red{ color:red; font-style:italic; font-size:32; } .blue{color:blue; font-size:36; } .black{color:black; } </style> <script language="javascript"> function color(e) { switch(e.srcElement.id){ //获得标记的id case "first": document.getElementById("first").className="red"; //修改文字的样式 break; case "second": document.getElementById("second").className="blue"; break; } } function clearText(e) { switch(e.srcElement.id){ case "first": document.getElementById("first").className="black"; break; case "second": document.getElementById("second").className="black"; break; } } </script> </head> <body> <div id="first" onMouseOver="color(event);" onMouseOut="clearText(event);">我是新手,摸一下</div> <br> <div id="second" onMouseOver="color(event);" onMouseOut="clearText(event);">老油条了</div> </body> </html>
效果演示:
|