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

Dhtml网页实例教程（4）

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

标签：html,dhtml,教程

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。

第一页上一页 2 3

5 6 下一页

投稿

Dhtml网页实例教程（4）

猜你喜欢