📄 part5_3.cfm
字号:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb_2312-80">
<META NAME="Generator" CONTENT="Microsoft Word 97">
<TITLE>动态内容</TITLE>
</HEAD>
<BODY>
<B><FONT FACE="楷体_GB2312" LANG="ZH-CN" SIZE=5><P ALIGN="JUSTIFY">动态内容</P>
</B></FONT><FONT SIZE=3><P ALIGN="JUSTIFY"> </FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>脚本可以动态改变显示在网页上的内容，有两种</FONT><FONT SIZE=3>style</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>属性可以实现这一功能。</FONT><FONT SIZE=3>Visibility style</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>属性控制某个元素是否在网页上显示。若其值设为</FONT><FONT SIZE=3>“hidden”</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>则此元素不可见，然而此元素所占的空间仍然为其保留。</P>
<P ALIGN="JUSTIFY">下例说明了这一技术，它在网页上显示了一幅图象，当鼠标移到图象上时，它就消失，当移出图象时，它又出现了。</P>
<P ALIGN="JUSTIFY"></P>
</FONT><FONT SIZE=3><P ALIGN="JUSTIFY"><script language="vbscript"></P>
<P ALIGN="JUSTIFY">Sub div1_onmouseover</P>
<P ALIGN="JUSTIFY"> img1.style.visibility = "hidden"</P>
<P ALIGN="JUSTIFY">End Sub</P>
<P ALIGN="JUSTIFY">Sub div1_onmouseout</P>
<P ALIGN="JUSTIFY"> img1.style.visibility = "visible"</P>
<P ALIGN="JUSTIFY">End Sub</P>
<P ALIGN="JUSTIFY"></script></P>
<P ALIGN="JUSTIFY"></P>
<P ALIGN="JUSTIFY"><body></P>
<P ALIGN="JUSTIFY">Before the image</P>
<P ALIGN="JUSTIFY"><div id="div1" style="width: 100pt"></P>
<P ALIGN="JUSTIFY"><img name="img1" src="germany.gif"></P>
<P ALIGN="JUSTIFY"></div></P>
<P ALIGN="JUSTIFY">After the image</P>
<P ALIGN="JUSTIFY"></body></P>
</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY"></P>
</FONT><FONT SIZE=3><P ALIGN="JUSTIFY"> </FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>另一属性是</FONT><FONT SIZE=3>display style</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>属性，它决定是否为某个元素保留空间，若将它设为“</FONT><FONT SIZE=3>none</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>”，则元素不可见且空间也不为其保留。如果后来此属性被设为缺省值，则元素又在网页上显示出来。</P>
<P ALIGN="JUSTIFY">下例说明了这一技术。它在网页上显示四个国家的名字，若鼠标在某一名字上点击，则出现那个国家的国旗再点击一次国旗消失。</P>
<P ALIGN="JUSTIFY"></P>
</FONT><FONT SIZE=3><P ALIGN="JUSTIFY"><style type="text/css"></P>
<P ALIGN="JUSTIFY">body { background-color: #cfcfcf }</P>
<P ALIGN="JUSTIFY">.country { cursor: default; font-weight: bold; font-size: 20pt }</P>
<P ALIGN="JUSTIFY"></style></P>
<P ALIGN="JUSTIFY"></P>
<P ALIGN="JUSTIFY"><script language="vbscript"></P>
<P ALIGN="JUSTIFY">Sub hideShowFlag(divid)</P>
<P ALIGN="JUSTIFY"> if divid.style.display = "none" Then</P>
<P ALIGN="JUSTIFY"> divid.style.display = ""</P>
<P ALIGN="JUSTIFY"> Else</P>
<P ALIGN="JUSTIFY"> divid.style.display = "none"</P>
<P ALIGN="JUSTIFY"> End If</P>
<P ALIGN="JUSTIFY">End Sub</P>
<P ALIGN="JUSTIFY"></script></P>
<P ALIGN="JUSTIFY"></P>
<P ALIGN="JUSTIFY"><span class="country" onclick="hideShowFlag(flag1)">France</span><br></P>
<P ALIGN="JUSTIFY"><div id="flag1" style="display: none"></P>
<P ALIGN="JUSTIFY"><img src="france.gif"></P>
<P ALIGN="JUSTIFY"></div></P>
<P ALIGN="JUSTIFY"></P>
<P ALIGN="JUSTIFY"><span class="country" onclick="hideShowFlag(flag2)">Germany</span><br></P>
<P ALIGN="JUSTIFY"><div id="flag2" style="display: none"></P>
<P ALIGN="JUSTIFY"><img src="germany.gif"></P>
<P ALIGN="JUSTIFY"></div></P>
<P ALIGN="JUSTIFY"></P>
<P ALIGN="JUSTIFY"><span class="country" onclick="hideShowFlag(flag3)">Italy</span><br></P>
<P ALIGN="JUSTIFY"><div id="flag3" style="display: none"></P>
<P ALIGN="JUSTIFY"><img src="italy.gif"></P>
<P ALIGN="JUSTIFY"></div></P>
<P ALIGN="JUSTIFY"></P>
<P ALIGN="JUSTIFY"><span class="country" onclick="hideShowFlag(flag4)">Japan</span><br></P>
<P ALIGN="JUSTIFY"><div id="flag4" style="display: none"></P>
<P ALIGN="JUSTIFY"><img src="japan.gif"></P>
<P ALIGN="JUSTIFY"></div></P>
</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3><P ALIGN="JUSTIFY"></P>
<P ALIGN="JUSTIFY">此例中头部是一个</FONT><FONT SIZE=3>style sheet</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>，用于设置背景色及国家名的字体，随后是一事件处理函数用于处理鼠标点击国家名的事件，其中将</FONT><FONT SIZE=3>display style</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>属性在</FONT><FONT SIZE=3>none</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>和缺省值间切换。注意此事件处理函数有一参数，是包含国旗的区域的</FONT><FONT SIZE=3>id</FONT><FONT FACE="宋体" LANG="ZH-CN" SIZE=3>号，这样就控制国旗的出现与消失。</P>
<P ALIGN="JUSTIFY"></P></FONT><p>
<p>
<font color="red">此手册未经本公司允许,不得擅自转载、转贴、篡改。违者将追究其法律责任。</font>
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -