网络编程
位置：首页>> 网络编程>> 网页设计>> Dhtml网页实例教程（5）

Dhtml网页实例教程（5）

　来源：动态WEB脚本技术论坛　发布时间：2007-10-09 13:39:00　

标签：html,dhtml,教程

Dhtml实例教程（五）

例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事件而觉得麻烦，不要紧，我马上来搞定这个麻烦问题。请期待明天的连载。

第一页 上一页 3 4
5
6 7 下一页
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com