Javascript初学者实例教程(11):鼠标动作

【 tulaoshi.com - Web开发 】

上一篇学习了：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

效果演示：

htmlheadmeta http-equiv="Content-Type" content="text/html; charset=gb2312"title改变文字样式/titlestyle type="text/css".red{ color:red;font-style:italic;font-size:32;}.blue{color:blue;font-size:36;}.black{color:black;}/stylescript language="javascript"function color(e){switch(e.srcElement.id){ //获得标记的idcase "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/headbodydiv id="first" onMouseOver="color(event);" onMouseOut="clearText(event);"我是新手，摸一下/divbrdiv id="second" onMouseOver="color(event);" onMouseOut="clearText(event);"老油条了/div/body/html
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]