下面的代码示例演示如何显示或隐藏使用这两个样式表属性 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)
分享到：
相关推荐
3.1 使用标签、元素和属性 3.1.1 标签 3.1.2 元素 3.1.3 属性的定义 3.1.4 属性值的定义 3.1.5 元素和属性的大小写规范 3.2 字符引用 3.2.1 字符数字引用 3.2.2 字符实体引用 3.3 使用注释 3.4 关于空白和空白字符 ...
使用内部样式表，进一步将表现和结构分离，可以同时为多个元素设置样式，方便后期的维护 3.外部样式表 将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入 文件的路径"/> 将样式编写到外部...
4. 如何使用jQuery来切换样式表 3 5. 如何限制选择范围（基于优化目的）： 3 6. 如何正确地使用ToggleClass： 4 7. 如何设置IE特有的功能： 4 8. 如何使用jQuery来代替一个元素： 4 9. 如何验证某个元素是否为空： 4...
创建样式表文件（.css） 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <link rel="stylesheet" href="URL../.css"> 3.CSS样式特征 1.继承性 必须是父子（有层叠嵌套的关系）结构 大部分的...
12.7.2 控制DOM元素的显示与隐藏 12.7.3 改变颜色和大小--一个简单有趣的例子 12.7.4 改变位置--创建一个绕圆圈旋转的文字 12.7.5 编辑控制及其范例 12.7.6 改变样式及其范例 12.7.7 改变行为...
4.2 使用removeClass（）函数动态移除样式类 4.3 使用toggleClass（）函数切换页面元素的样式类 4.4 为body增加class类支持 4.5 操作div的显示与隐藏 4.6 如何设定div始终居中显示 4.7 测试浏览器是否支持某些CSS 3...
您可以在样式指南中使用这些类来显示其他样式，这些样式在常规生产样式表中可能被隐藏或需要单独定义。 用法 在html文件的底部添加javascript文件。 在元素上使用假类 fake-hover用于悬停元素的状态 fake-focus以...
12.7.htm 使用Ajax动态改变局部元素样式 CSSmenu 使用Ajax+CSS实现动态菜单效果 第13章（/C13/） 13.1.xml 一个简单的xml文件 13.1.xsl 使用XSLT将XML转换为HTML 13.2.xml ...
9.8隐藏和显示表单元素 9.9根据其他表单选择修改一个选项列表 第10章调试和错误处理 10.0简介 …… 第11章访问页面元素 第12章创建和删除元素和属性 第13章使用Web页面空间 第14章使用JavaScript...
4.2.2 使用层叠样式表改变样式 88 4.3 HTML服务器控件 93 4.3.1 HtmlControl基类 95 4.3.2 HtmlContainerControl类 96 4.3.3 所有的HTML类 96 4.3.4 使用HtmlGenericControl类 97 4.4 通过JavaScript处理页面...
6.6.2 将样式移动到样式表 105 6.6.3 样式表编辑 105 6.7 主题的构成与构建 106 6.8 设置站点级别的样式 107 6.9 站点导航 108 6.9.1站点地图 108 6.9.2 SiteMapDataSource控件 108 6.10 导航控件 109 6.10.1 ...
4.2 显示和隐藏内容 4.2.1 使用Visible和Enabled属性 4.2.2 使用Panel控件 4.2.3 模拟多页面表单 4.2.4 通过程序添加控件 4.2.5 将控件添加到页面 4.2.6 PlaceHolder控件 ...
16.1.2 应用样式表规则 16.2 主题 16.2.1 主题文件夹和外观 16.2.2 应用简单主题 16.2.3 处理主题冲突 16.2.4 为同一控件创建多个外观 16.2.5 含有模板和图片的外观 16.2.6 在主题里使用CSS 16.2.7...
16.1.2 应用样式表规则 540 16.2 主题 542 16.2.1 主题文件夹和外观 543 16.2.2 应用简单主题 544 16.2.3 处理主题冲突 545 16.2.4 为同一控件创建多个外观 546 16.2.5 含有模板和图片的外观 547 ...
3.9 小结 <br>第4章 高级控件编程 <br>4.1 使用视图状态 4.1.1 禁用视图状态 4.1.2 将值添加到视图状态 4.2 显示和隐藏内容 4.2.1 使用Visible和Enabled属性 4.2.2 使用Panel控件 ...
3.9 小结 <br>第4章 高级控件编程 <br>4.1 使用视图状态 4.1.1 禁用视图状态 4.1.2 将值添加到视图状态 4.2 显示和隐藏内容 4.2.1 使用Visible和Enabled属性 4.2.2 使用Panel控件 ...