如何动态显示和隐藏 HTML 元素使用样式表属性

mowengaobo · 发表于 2013-2-7 22:19:01

下面的代码示例演示如何显示或隐藏使用这两个样式表属性 P 标记内的文本。将下列 HTML 代码保存到桌面作为 dhtmtest.htm，并在 Internet 浏览器 4.0 或更高版本，然后打开。您将看到演示如何显示和隐藏文本通过切换样式表属性与 JavaScript 的两个表的列。

每个示例显示如何使用可见性和显示样式属性。  这两个属性隐藏文本时区别在于 显示 = 无 不留在屏幕上对象的空间，而 可见性 = 隐藏 保留所使用的元素空间但不呈现到屏幕对象。

此外，显示属性内联和阻止不在 Internet Explorer 4.x 支持，但使用这些值仍按通常的方式显示元素。使用 Internet 浏览器 5，您应设置适当的显示属性值根据该元素是否内嵌或块元素。块元素通常开始一个新行和内联元素不会执行这些操作。
<div class="kb_codebody"><div class="kb_codecontent"><html><head><title>DHTML Test</title><style>  .visi1 { visibility:"visible" }  .visi2 { visibility:"hidden" }  .disp1 { display:"block" }  .disp2 { display:"none" }</style></head><body><h3 align="center">Displaying and hiding text</h3><p align="center">The following two examples show two methods to show and hide text dynamically.</p><div align="center"><center><table border="1"><tr> <th>Changing Stylesheet</th> <th>Changing inline style</th></tr><tr> <td valign="top">       <p          onMouseOut="HideMe1.className='visi1'">          Move the mouse over this text to make the following          text disappear.       </p>       <div id="HideMe1"> <p>DHTML using VISIBILITY</p> </div>       <p onMouseOut="HideMe2.className='disp1'"> Move the mouse over this text to make the following text disappear.       </p> <div id="HideMe2"> <p>DHTML using DISPLAY</p> </div>       <p>When the DISPLAY text disappears, this text moves up.</p> </td> <td valign="top">       <p          onMouseOut="HideMe3.style.visibility='visible'">          Move the mouse over this text to make the following          text disappear.       </p>       <div id="HideMe3"> <p>DHTML using VISIBILITY</p> </div>       <p          onMouseOut="HideMe4.style.display='block'">          Move the mouse over this text to make the following          text disappear.       </p>       <div id="HideMe4"> <p>DHTML using DISPLAY</p> </div>       <p>When the DISPLAY text disappears, this text moves up.</p> </td></tr></table></center></div></body></html>

		自动登录	找回密码
密码			立即注册