Dhtml网页实例教程(2)
来源:动态WEB脚本技术论坛 时间:2007-10-09 13:39:00
Dhtml实例教程(二)
例3 使用鼠标触发事件和动态样式表改变文本
<html>
<head>
<title>DHtml举例3</title>
</head>
<body>
<h2 onmouseover="this.style.textDecoration=’underline’" onmouseout="this.style.textDecoration=’underline’" style="font-size:12;text-align:center">请将鼠标移到上面!</h3>
<br>
<h3 align="center" onmouseover="this.style.color=’red’" onmouseout="this.style.color=’green’">我是变色龙!</h3>
</body>
</html>
在这个例子中,当您把光标放在文字上时,onmouseover事件将被触发,于是执行其后的style定义,此时文字下加了一条直线(this.style.textDecoration='underline'的作用),this用来指代当前的对象,即 标志对。当您把光标移开文字时onmouseout事件被触发,此时文字下的直线消失了(this.style.textDecoration='underline'的作用),这样网页就有了动态的效果。同理,我们可以通过触发鼠标事件来改变文本的颜色,如上例中的第二行黑体字所示。
再次提醒读者,在使用样式单的时候一定要注意格式。比如,在< style>< /style>标志对中进行样式单定义时应使用text-decoration:underline,而不是用textDecoration='underline'来修饰文本,后者是用于事件触发中的(如onmouseover或onmouseout事件)。许多CSS属性的名字中都有连字符(像text-decoration),但是连字符在许多脚本语言(如JavaScript)中是不合法的标识符,因此,在HTML或样式表中指明CSS属性的时候用连字符命名方式,但在作为一个脚本属性时,就必须去掉连字符,并将它后面的第一个字母大写。
例如: text-decoration变为textDecoration、background-color变成backgroundColor、margin-top变成marginTop。
您可能想用鼠标点击文本来改变其的颜色,要做到这一点很简单,只要在onclick事件中定义样式即可,onclick的用法与onmouseover、onmouseout相似。请看明天连载三的例子。
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python使用pandas导入csv文件内容的示例代码
![](https://img.aspxhome.com/file/2023/7/110387_0s.png)
Pytest实现setup和teardown的详细使用详解
![](https://img.aspxhome.com/file/2023/6/78596_0s.jpg)
多维度导航探秘II
![](https://img.aspxhome.com/file/UploadPic/20108/17/qqe59586e59f8e-53s.png)
MySQL 使用SQL语句修改表名的实现
![](https://img.aspxhome.com/file/2023/1/121541_0s.jpg)
Python 列表反转显示的四种方法
基于Python中求和函数sum的用法详解
ASP中使用Session变量的优缺点
UTF-8转为GB2312编码的asp函数
django xadmin中form_layout添加字段显示方式
![](https://img.aspxhome.com/file/2023/0/76070_0s.jpg)
python数据分析:关键字提取方式
Python解决多进程间访问效率低的方法总结
基于Mediapipe+Opencv实现手势检测功能
![](https://img.aspxhome.com/file/2023/8/114748_0s.png)
Python中的变量及简单数据类型应用
![](https://img.aspxhome.com/file/2023/5/71365_0s.png)
在Python中使用sort()方法进行排序的简单教程
如何创建SQL Server 2000故障转移群集
python爬虫使用正则爬取网站的实现
![](https://img.aspxhome.com/file/2023/1/135111_0s.jpg)
Python实现的手机号归属地相关信息查询功能示例
Nuxt3+ElementPlus构建打包部署全过程
![](https://img.aspxhome.com/file/2023/3/139673_0s.png)
SQL语句解析执行的过程及原理
![](https://img.aspxhome.com/file/2023/1/127571_0s.png)