网络编程
位置:首页>> 网络编程>> 网页设计>> Dhtml网页实例教程(7)

Dhtml网页实例教程(7)

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

标签:html,dhtml,教程

Dhtml实例教程(七)

相信您已经对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"时是显示文本,上边的代码对您来说应该多能读懂,我就不多作解释了。今后的教程中我可能会讲解得比较少或者讲解得不太详细,大部分是用例子种的注释语句来说明,在此请读者多多谅解。明天的例子能产生闪烁滚动和颜色变换效果。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com