Dhtml网页实例教程（4）
来源：动态WEB脚本技术论坛 时间：2007-10-09 13:39:00
Dhtml实例教程（四）
现在我们开始使用JavaScript来编写动态Html，JavaScript是一种脚本语言，使用起来就象是在编写程序一样。
实际上，我们只要在Html文件中加入<script language="JavaScript"></script>标志对，便可以在标志对中进行编写了。现在我们将教程二中的例3做一下变换，也能得到同样的效果。请看下边的例子。
例6 使用鼠标触发事件和动态样式表改变文本
<html>
<head>
<title>DHtml举例6</title>
<script language="JavaScript">
function change_text(){
if(document.all.Dragon.style.color=="Red"){
document.all.Dragon.style.color="Green";
}
else
{
document.all.Dragon.style.color="Red";
}
}
</script>
</head>
<body>
<br>
<h3 id="Dragon" align="center" onmouseover="change_text()" onmouseout="change_text()">我是变色龙！</h3>
</body>
</html>
例6中在<script language="JavaScript"></script>标志对中定义了函数change_text()，当此函数被调用时，它将对对象Dragon的style属性中的color属性进行判断，若其颜色值等于“Red”，则将其color值变为“Green”（document.all.Dragon.style.color="Green"的作用），否则将其color值变为“Red”（document.all.Dragon.style.color="Red"的作用）。
而对change_text()函数的调用是在<h3></h3>标志对中进行的，id="Dragon"定义了<h3></h3>标志对的对象名为Dragon，onmouseover和onmouseout都调用了change_text()函数，因此只要onmouseover或onmouseout事件触发，都会执行change_text()函数，于是便改变了Dragon的属性，即当鼠标移动到或离开文本“我是变色龙”时，此文本的颜色将在红色（Red）和绿色（Green）之间变换。Document指代的是例6自身这个Html文档，all指代的是此Html文档的全部对象。
现在看起来要使网页动起来已经变得简单多了。细心的读者会发现例6的局限性，因为change_text()函数只能对Dragon对象进行颜色变换，若您想对一系列对象的文本（如列表中的每一行文本）进行颜色变换将会使代码增加。不用担心，我们马上解决。为了让change_text()函数更具有通用性，我把CSS样式单与JavaScript相结合，这将更加简单而且方便，请看明天的例7。
0
投稿猜你喜欢
Python图像处理之透视变换的实战应用
Python实现批量下载图片的方法
golang的httpserver优雅重启方法详解
python输入中文的实例方法
浅谈Python爬取网页的编码处理
用openCV和Python 实现图片对比,并标识出不同点的方式
深入探究Django中的Session与Cookie
python模糊图片过滤的方法
MySQL8.0无法远程连接访问的解决方法
python获得命令行输入的参数的两种方式
OpenCV结合selenium实现滑块验证码
QCon大会散记
python机器学习之随机森林（七）
python实现批量修改文件名代码
vue之封装多个组件调用同一接口的案例
python偏函数的实例用法总结
Python创建增量目录的代码实例
Python学习之字典和集合的使用详解
TensorFlow实现AutoEncoder自编码器
