自学动态HTML---教程三 文章来源：中国石油大学 相信您已经对JavaScript有所掌握，现在我们用一些小技巧把文本给隐藏起来或将隐藏的文本给显示出来，您一定会喜欢这些小技巧的。这次我们用一个新的style属性--display，它的值可以是""（或null）和"none"。请看例9。 例9 隐藏和显示文本
<html>
<head>
<title>DHtml举例9</title>
<style><!--
body {font-family:"宋体";font-size:9pt}
.gray {color:gray}
.blue {color:blue}
-->
</style>
<script language="JavaScript">
function change() {
if(Ques.style.display == "none")
{
Answ.style.display = "none";
Ques.style.display = "";
}
else
{
Answ.style.display = "";
Ques.style.display = "none";
}
} document.onclick=change;
</script>
<body>
<ul>
<li id="Ques" class="gray" style="display:''">请您点击，OK?
<li id="Answ" class="blue" style="display:'none'">哈哈，我变了，请您再点击。
</ul>
</body>
</html> 此例中，文本将在您点击以后改变颜色和内容，奇妙吧。display=""或"null"是显示文本，而display="none"时是显示文本，上边的代码对您来说应该多能读懂，我就不多作解释了。今后的教程中我可能会讲解得比较少或者讲解得不太详细，大部分是用例子种的注释语句来说明，在此请读者多多谅解。下面的例子能产生闪烁滚动和颜色变换效果。 例11 闪烁滚动和颜色变换效果
<html>
<head>
<title>DHtml举例10</title>
<style><!--
body {font-family:"宋体";font-size:9pt}
.blue {color:blue}
.red {color:red}
-->
</style>
<script language="JavaScript">
var flag=0; //定义变量flag， function disappear() {
var dx=window.event.srcElement;//定义变量dx为对象window.event.srcElement
var i,j; //定义循环变量 for(i=0;i<=1000;i++){for(j=0;j<=200;j++);}//利用循环来延长执行的时间，读者可以通过改变1000和200这两个数字来调节变化速度
dx.style.display = "none"; }//function function appear() {
var dx=window.event.srcElement;//定义变量dx为对象window.event.srcElement
var i,j; //定义循环变量 for(i=0;i<=1000;i++){for(j=0;j<=200;j++);}//利用循环来延长执行的时间
dx.style.display = ""; if(flag==1) //利用变量flag来改变显示文本的样式类
{ flag=0;
dx.className="red";}
else
{ flag=1;
dx.className="blue";}//if }//function </script>
<body>
<p>请您在以下各行之间移动鼠标……</p>
<br>
<ul>
<li class="blue" style="display:''" onmouseover="disappear()" onmouseout="appear()">AC 米 兰
<li class="blue" style="display:''" onmouseover="disappear()" onmouseout="appear()">国 际 米 兰
<li class="blue" style="display:''" onmouseover="disappear()" onmouseout="appear()">尤 文 图 斯
<li class="blue" style="display:''" onmouseover="disappear()" onmouseout="appear()">佛 罗 伦 萨
<li class="blue" style="display:''" onmouseover="disappear()" onmouseout="appear()">桑 普 多 利 亚
<li class="blue" style="display:''" onmouseover="disappear()" onmouseout="appear()">拉 齐 奥
</ul>
</body>
</html> 此例的效果请看下边： 请您在以下各行之间移动鼠标…… - AC 米 兰
- 国 际 米 兰
- 尤 文 图 斯
- 佛 罗 伦 萨
- 桑 普 多 利 亚
- 拉 齐 奥
下边我为您举了一个我比较常用的设计网页的方法。重点在于定义表格和链结的样式，并使用表格来控制文本输出。 例11 网页中常用的动态链结设计
<html>
<head>
<title>DHtml举例11</title>
<style><!--
table {font-family:"宋体";font-size:9pt}
a:link {color:white;text-decoration:none}
a:visited {color:white;text-decoration:none}
a:hover {color:yellow;text-decoration:underline}
-->
</style>
</head> <body>
<table border="0" width="18%" bgcolor="#930000" cellspacing="6">
<tr>
<td width="100%"><a href="http://www.bianceng.cn/Programming/">编程语言</a></td>
</tr>
<tr>
<td width="100%"><a href="http://www.bianceng.cn/webkf/">web开发</a></td>
</tr>
<tr>
<td width="100%"><a href="http://www.bianceng.cn/database/">数据库</a></td>
</tr>
<tr>
<td width="100%"><a href="http://club.bianceng.cn">学编程论坛</a></td>
</tr>
</table>
</body>
</html> a:link是定义链结部分（即语句<a href="……">……</a>）有链结时的文本样式；a:visited是定义访问过的链结部分的文本样式；a:hover是定义鼠标移到链结部分上边时文本的样式。千万要记住这三个有关链结的样式定义的定义顺序，否则将得不到想要的效果。 [返回] | 
