现在我们开始使用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事件。 您大可以自己设计出更好看、更动感的DHtml来，不怕做不到，就怕想不到。
Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved. 闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)
鄂公网安备 42011102001154号
站长：MinTao ICP备案号：鄂ICP备11006601号-18
注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！ 本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网] 
