Dhtml网页实例教程(5)
来源:动态WEB脚本技术论坛 时间:2007-10-09 13:39:00
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事件而觉得麻烦,不要紧,我马上来搞定这个麻烦问题。请期待明天的连载。
标签:html,dhtml,教程
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
详解Python下ftp上传文件linux服务器
2023-12-31 19:02:37
![](https://img.aspxhome.com/file/2023/0/90680_0s.png)
关于ASP eof与bof 区别分析
2011-03-11 11:14:00
ASP读取ini文件
2010-01-20 11:17:00
python 实现倒计时功能(gui界面)
2021-03-05 14:19:55
![](https://img.aspxhome.com/file/2023/5/68915_0s.gif)
利用Python脚本写端口扫描器socket,python-nmap
2021-05-10 15:16:54
![](https://img.aspxhome.com/file/2023/8/110198_0s.png)
MS SQL 查询数据在数据库中所在行
2009-04-26 19:36:00
显示ASP页面源码的代码
2008-10-12 13:05:00
页面中 CSS 加载方式的优化
2008-03-26 12:36:00
利用 Python 把小伙伴制作成表情包
2022-08-14 16:57:46
![](https://img.aspxhome.com/file/2023/5/134715_0s.jpg)
修改python plot折线图的坐标轴刻度方法
2021-06-24 09:09:43
![](https://img.aspxhome.com/file/2023/9/115639_0s.jpg)
Python Pygame实战之超级炸弹人游戏的实现
2023-07-24 00:56:11
![](https://img.aspxhome.com/file/2023/3/120353_0s.jpg)
ASP中正则表达式的应用
2010-05-27 12:24:00
Python爬虫框架Scrapy常用命令总结
2022-02-21 20:45:23
![](https://img.aspxhome.com/file/2023/3/118293_0s.png)
SqlServer 2005 T-SQL Query 学习笔记(2)
2024-01-20 20:21:51
golang组件swagger生成接口文档实践示例
2023-09-19 11:29:39
![](https://img.aspxhome.com/file/2023/3/100793_0s.png)
Python面向对象的三大特性封装、继承、多态
2023-12-11 05:15:52
MYSQL的存储过程和函数简单写法
2024-01-21 20:16:34
Python数据结构之栈详解
2021-01-07 01:12:36
![](https://img.aspxhome.com/file/2023/3/101223_0s.png)
无序列表 li ul
2008-07-29 13:00:00
javascript新闻图片轮换类
2009-01-09 12:57:00