怎么动态显示和隐藏 HTML 元素使用样式表属性
日期：2014-05-17 浏览次数：20718 次
如何动态显示和隐藏 HTML 元素使用样式表属性
下面的代码示例演示如何显示或隐藏使用这两个样式表属性 P 标记内的文本。将下列 HTML 代码保存到桌面作为 dhtmtest.htm，并在
Internet 浏览器 4.0 或更高版本，然后打开。您将看到演示如何显示和隐藏文本通过切换样式表属性与 JavaScript 的两个表的列。
每个示例显示如何使用可见性和显示样式属性。 这两个属性隐藏文本时区别在于 显示 = 无
不留在屏幕上对象的空间，而 可见性 = 隐藏
保留所使用的元素空间但不呈现到屏幕对象。
此
外，显示属性内联和阻止不在 Internet Explorer 4.x 支持，但使用这些值仍按通常的方式显示元素。使用 Internet 浏览器
5，您应设置适当的显示属性值根据该元素是否内嵌或块元素。块元素通常开始一个新行和内联元素不会执行这些操作。
<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 onMouseOver="HideMe1.className='visi2'"
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 onMouseOver="HideMe2.className='disp2'"
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 onMouseOver="HideMe3.style.visibility='hidden'"
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 onMouseOver="HideMe4.style.display='none'"
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>
DHTML、 HTML，和 CSS 部分下的以下 url 找不到有关级联样式表和 DHTML 的文档：
http://msdn.microsoft.com/workshop
(http://msdn.microsoft.com/workshop)
在以下 URL 找不到有关脚本编写语言的信息：
http://msdn2.microsoft.com/en-us/library/ms950396.aspx
(http://msdn2.microsoft.com/en-us/library/ms950396.aspx)
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
