例
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" onmou
seover="change_text()" onmou
seout="change_text()">我是变色龙！</h3>
<h3 class="blue" align="center" onmou
seover="change_text()" onmou
seout="change_text()">我是变色鸟！</h3>
<h3 class="red" align="center" onmou
seover="change_text()" onmou
seout="change_text()">我是变色兔！</h3>
</body>
</html>
从上例中可以看到，我在
css样式单中定义了red和blue两个样式类，然后在change_text()函数中对调用该函数的对象进行样式类的改变，从而达到颜色的变换，关键语句在于window.event.srcElement.className="样式类名"，此语句能使当前调用函数的对象的className属性改变，若class="red"，当调用change_text()函数时，其className="blue"，它的样式类也就变成了“blue”。
也许您会因为要对每一行文本增加onmou
seover和onmou
seout事件而觉得麻烦，不要紧，我马上来搞定这个麻烦问题。下边是一个效果不错的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.onmou
seover=change_text;
document.onmou
seout=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.onmou
seover=change_text;和document.onmou
seout=change_text;只就是我们解决上边提到的问题的关键语句，它们代替了Html文档中所有的onmou
seover和onmou
seout事件。
您大可以自己设计出更好看、更动感的DHtml来，不怕做不到，就怕想不到。
