|
现在我们开始使用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相结合，这
将更加简单而且方便
上一页 [1] [2] [3] [4] [5] [6] [7] [8] 下一页
|
评论
收藏
分享
打印
