现在我们开始使用JavaScript来编写动态Html,JavaScript是一种脚本语言,使用起来就象是在编写程序一样。实际上,我们只要在Html文件中加入<script language="JavaScript"></script>标志对,便可以在标志对中进行编写了。现在我们将教程二中的例3做一下变换,也能得到同样的效果。请看下边的例子。

例 使用鼠标触发事件和动态样式表改变文本

<html> 
<head> 
<title>DHtml举例6</title> 
<script language="JavaScript"> 
function change_text(){ 
if(document.all.Dragon.style.color=="Red"){ 
document.all.Dragon.style.color="Green"; 
} 
else 
{ 
document.all.Dragon.style.color="Red"; 
} 
} 
</script> 
</head> 
<body> 
<br> 
<h3 id="Dragon" align="center" onmouseover="change_text()" onmouseout="change_text()">我是变色龙!</h3> 
</body> 
</html>

  例中在<script language="JavaScript"></script>标志对中定义了函数change_text(),当此函数被调用时,它将对对象Dragon的style属性中的color属性进行判断,若其颜色值等于“Red”,则将其color值变为“Green”(document.all.Dragon.style.color="Green"的作用),否则将其color值变为“Red”(document.all.Dragon.style.color="Red"的作用)。而对change_text()函数的调用是在<h3></h3>标志对中进行的,id="Dragon"定义了<h3></h3>标志对的对象名为Dragon,onmouseover和onmouseout都调用了change_text()函数,因此只要onmouseover或onmouseout事件触发,都会执行change_text()函数,于是便改变了Dragon的属性,即当鼠标移动到或离开文本“我是变色龙”时,此文本的颜色将在红色(Red)和绿色(Green)之间变换。Document指代的是上例自身这个Html文档,all指代的是此Html文档的全部对象。

  现在看起来要使网页动起来已经变得简单多了。细心的读者会发现例6的局限性,因为change_text()函数只能对Dragon对象进行颜色变换,若您想对一系列对象的文本(如列表中的每一行文本)进行颜色变换将会使代码增加。不用担心,我们马上解决。为了让change_text()函数更具有通用性,我把CSS样式单与JavaScript相结合,这将更加简单而且方便。

例 CSS样式单与JavaScript相结合改变文本

<html> 
<head> 
<title>DHtml举例7</title> 
<style><!-- 
.red {color:red} 
.blue {color:blue} 
--> 
</style> 
<script language="JavaScript"> 
function change_text(){ 
if(window.event.srcElement.className=="red"){ 
window.event.srcElement.className="blue"; 
} 
else 
{ 
window.event.srcElement.className="red"; 
} 
} 
</script> 
</head> 
<body> 
<br> 
<h3 class="red" align="center" onmouseover="change_text()" onmouseout="change_text()">我是变色龙!</h3> 
<h3 class="blue" align="center" onmouseover="change_text()" onmouseout="change_text()">我是变色鸟!</h3> 
<h3 class="red" align="center" onmouseover="change_text()" onmouseout="change_text()">我是变色兔!</h3> 
</body> 
</html>

  从上例中可以看到,我在CSS样式单中定义了red和blue两个样式类,然后在change_text()函数中对调用该函数的对象进行样式类的改变,从而达到颜色的变换,关键语句在于window.event.srcElement.className="样式类名",此语句能使当前调用函数的对象的className属性改变,若class="red",当调用change_text()函数时,其className="blue",它的样式类也就变成了“blue”。

  也许您会因为要对每一行文本增加onmouseover和onmouseout事件而觉得麻烦,不要紧,我马上来搞定这个麻烦问题。下边是一个效果不错的DHtml,请仔细阅读。


例 对列表进行动态变换

<html> 
<head> 
<title>DHtml举例8</title> 
<style> 
body {font-family:"宋体";font-size:9pt} 
.first {color:gray;text-decoration:none} 
.later {cursor:hand;color:blue;text-decoration:underline} 
</style> 
<script language="JavaScript"> 
function change_text(){ 
if(window.event.srcElement.className=="first"){ 
window.event.srcElement.className="later"; 
} 
else 
{ 
window.event.srcElement.className="first"; 
} 
} 
document.onmouseover=change_text; 
document.onmouseout=change_text; 
</script> 
</head> 
<body> 
<br> 
<ul> 
<li class=first > 动态Html(DHtml) 
<li class=first > JavaScript 
<li class=first > VBScript 
<li class=first > 动态服务器页面(ASP) 
<li class=first > FrontPage98 
<li class=first > InternetExplorer 
<li class=first > SQL Server 
</ul> 
</body> 
</html>

  本例中的特别之处在于蓝色字部分。CSS样式单首先定义了<body></body>标志对的样式(body {font-family:"宋体";font-size:9pt}),然后定义了另外两个样式类“first”和“later”,first类中的文本修饰是none,既没有修饰,而later的文本修饰是underline,及下加一条直线,并且,later类中还出现了cursor属性,其值为hand,即是网页中鼠标移到超级链结是出现的小手。除了小手外,cursor还可以取其它的值:default、hand、move、crosshair、text、wait、help、nw-resize、n-resize、se-resize、sw-resize、s-resize、w-resize、e-resize和ne-resize等。

  注意到语句 document.onmouseover=change_text;和document.onmouseout=change_text;只就是我们解决上边提到的问题的关键语句,它们代替了Html文档中所有的onmouseover和onmouseout事件。