|
例7 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>
从例7中可以看到，我在CSS样式单中定义了red和blue两个样式类，然后在change_text()函数中对调用该函数的对象进行样式类的改变，从而达到颜色的变换，关键语句在于window.event.srcElement.className="样式类名"，此语句能使当前调用函数的对象的className属性改变，若class="red"，当调用change_text()函数时，其className="blue"，它的样式类也就变成了“blue”。
也许您会因为要对每一行文本增加onmouseover和onmouseout事件而觉得麻烦，不要紧，我马上来搞定这个麻烦问题。
上一页 [1] [2] [3] [4] [5] [6] [7] [8] 下一页
|
评论
收藏
分享
打印
