下面的代码示例演示如何显示或隐藏使用这两个样式表属性 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)
分享到：
相关推荐
通过iReport，你可以添加字段、文本框、表格、图像等元素，以及设置样式、表达式和计算逻辑。 在JasperReport的5.6.0版本中，开发者可能需要实现固定表头和隐藏/显示列的需求，这在处理大数据或需要滚动查看的报表...
HTML和CSS是网页设计的基础，其中CSS（层叠样式表）尤其重要，它负责定义页面的布局和样式。"HTML+css卷帘样式效果"是一个常见的动态效果，用于创造独特的用户体验，常见于网站的滑动展示或者动画效果中。这个效果...
在网页设计中，CSS（Cascading Style Sheets）是一种用于定义HTML或XML（包括SVG、XHTML等）文档中元素样式的样式表语言。在这个特定的主题中，“纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存”是指通过CSS实现的一...
CSS样式表是网页设计中用于控制页面布局和视觉表现的重要工具。以下是基于标题和描述的10个关键CSS技巧，帮助你提升网页的美观度和专业性。 1. CSS字体简写规则： 当定义字体样式时，可以使用简写形式，如`font: 1...
在"Div显示与隐藏网页制作"这个主题中，我们将探讨如何利用`Div`实现网页元素的动态显示和隐藏，这对于创建交互式和响应式的网页至关重要。 在网页设计中，有时我们需要根据用户的行为或者特定条件来控制某些内容的...
层加样式表（Layered Style Sheets，简称LSS）是一种扩展了传统CSS（Cascading Style Sheets）的技术，用于更高效、更灵活地控制网页布局和样式。在本资料包中，作者深入探讨了LSS的布局理念以及源码实现，通过五个...
通过内联样式表，设置了`div`元素的基本样式，包括边框、高度和宽度等属性。值得注意的是，`display: none;`使得这两个`div`在页面加载时默认是隐藏的。 ```css #div1 { border: 1px #06F solid; height: 50px; ...
在IT领域，XML（eXtensible Markup Language）是一种用于存储和传输数据的标记语言，而XSL（eXtensible Stylesheet Language）则是一种样式表语言，用于转换XML文档的结构和格式。本主题主要关注如何使用XSL解析XML...
在切换样式表后，可以先隐藏当前样式，然后加载新的样式后再显示。 ```javascript function switchStyleSheetWithFade(sheetName) { var linkElement = $('link[rel="stylesheet"]'); linkElement.fadeOut('fast'...
4. 添加过渡效果：使用CSS的`transition`属性，让菜单栏在显示和隐藏时有平滑的动画效果。 为了进一步提升用户体验，还可以考虑以下优化点： - 响应式设计：确保菜单栏在不同屏幕尺寸下都能良好工作，比如在小屏幕...
在微信小程序开发中，根据条件显示样式是一种常见的需求，它涉及到动态控制页面元素的可见性、颜色、大小等属性，从而实现丰富的用户交互体验。本文将深入探讨如何在微信小程序中实现这一功能。 首先，我们需要了解...
`fonts`和`css`目录则分别存放了项目中使用的字体文件和样式表，其中CSS文件中可能定义了侧边栏的样式以及相关的动画效果。 通过研究这个压缩包中的文件，开发者不仅可以学习到CSS3和JavaScript在创建交互式侧边栏...
"模块显示隐藏"则涉及到页面元素的动态显示与隐藏，可以优化用户体验，提高界面的可操作性和灵活性。"换肤"功能则是指允许用户根据个人喜好更改网站的主题颜色或样式，提升个性化体验。 **JavaScript (JS)**：JS 是...
在压缩包中的文件中，你可能会找到HTML示例文件和对应的CSS样式表。这些文件展示了各种不同的侧边栏菜单动画效果，包括但不限于滑动、折叠、旋转、淡入淡出等。通过研究这些代码，你可以学习到如何结合HTML5和CSS3的...
例如，通过`.click()`函数可以绑定点击事件，`.show()`和`.hide()`方法则可以控制日历元素的显示和隐藏，而`.animate()`可以添加平滑的过渡效果。 CSS3是层叠样式表的最新版本，提供了许多新的视觉效果和布局功能。...
在网页设计中，HTML（超文本标记语言）和CSS（层叠样式表）是构建用户界面的两大核心技术。本教程将聚焦于如何使用HTML和CSS创建一个简单的开关样式，为用户提供一种直观的交互方式，例如切换灯泡状态、开启或关闭...
这通常通过CSS（层叠样式表）或JavaScript实现，可以用来创建丰富的交互式界面，例如下拉菜单、弹出框和模态窗口等。 接下来，我们讨论“缓冲”或“过渡效果”。缓冲效果是一种动画技术，用于平滑地改变元素的状态...
`div` 元素被广泛用于组织和布局网页内容，通过 CSS（层叠样式表）来控制其样式、位置以及可见性。在本主题中，我们将深入探讨如何利用 `div` 实现“鼠标放到文字上显示隐藏的 `div`”这一交互效果。 首先，我们...
在样式表中，所有`body`、`td`和`th`元素的字体大小被设定为9像素。这有助于保持页面中文字的一致性和整洁性。 #### 1.2 页面边距设置 为了确保页面内容能够完全展示在浏览器窗口内，`body`元素的四周边距都被设为0...