`
fanjf
  • 浏览: 332963 次
  • 性别: Icon_minigender_1
  • 来自: 安徽
社区版块
存档分类
最新评论

JS的display与visibility隐藏文本的区别

 
阅读更多

<html>
<head>
<title>JS的display与visibility隐藏文本的区别</title>
<script language="javascript">
   function testVisibility()
   {
         document.all("tb_0").style.visibility="hidden";
   }
   function testDisplay()
   {
        document.all("tb_1").style.display="none";
   }
   function test()
   {
       document.all("tb_0").style.visibility="visible";
       document.all("tb_1").style.display="block";
   }
</script>
</head>
<body>
JS中的style对象中的display属性和visibility属性的区别<br/>
一、  visibility属性的常用属性值有两个,分别为 <br/>

       1、hidden: 隐藏,占位 <br/>
       2、visible : 显示 <br/>

二、 display属性的常用属性值有两个,分别为 <br/>

       1、none: 隐藏,不占位,空件之间重新定位 <br/>
       2、block: 显示 <br/>



示例:
<form name="form1" method="post">
   <table id="tb_0" bgColor ='#e8f5ff'>
    <tr>
     <td>内容测试--visibility</td>
    </tr>
   </table>

   <hr/>

   <table id="tb_1"  bgColor ='#CCCCFF'>
    <tr>
     <td>内容测试--display</td>
    </tr>
   </table>
   <input type="button" onClick="test();" value="还原">
   <input type="button" onClick="testVisibility();" value="测试visibility">
   <input type="button" onClick="testDisplay();" value="测试display">
</form>
</body>
</html>

 

display属性说明:

style.display属性一切皆有可能

display版本:CSS1/CSS2    兼容性:IE4+   NS4+ 继承性:无
 
语法:
display   :   block   |   none   |   inline   |   compact   |   marker   |   inline-table   |   list-item   |   run-in   |  

table   |table-caption   |   table-cell   |   table-column   |   table-column-group   |   table-footer-group   |   table-

header-group   |   table-row   |   table-row-group  
 
参数:
block   :    CSS1 块对象的默认值。用该值为对象之后添加新行  
none   :    CSS1 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间  
inline   :    CSS1 内联对象的默认值。用该值将从对象中删除行  
compact   :    CSS2 分配对象为块对象或基于内容之上的内联对象  
marker   :    CSS2 指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before   伪元素一起使用  
inline-table   :    CSS2 将表格显示为无前后换行的内联对象或内联容器  
list-item   :    CSS1 将块对象指定为列表项目。并可以添加可选项目标志  
run-in   :    CSS2 分配对象为块对象或基于内容之上的内联对象  
table   :    CSS2 将对象作为块元素级的表格显示  
table-caption   :    CSS2 将对象作为表格标题显示  
table-cell   :    CSS2 将对象作为表格单元格显示  
table-column   :    CSS2 将对象作为表格列显示  
table-column-group   :    CSS2 将对象作为表格列组显示  
table-header-group   :    CSS2 将对象作为表格标题组显示  
table-footer-group   :    CSS2 将对象作为表格脚注组显示  
table-row   :    CSS2 将对象作为表格行显示  
table-row-group   :    CSS2 将对象作为表格行组显示

分享到:
评论

相关推荐

    display与visibility的区别

    ### Display与Visibility的区别 在网页布局与样式设计中,`display`与`visibility`属性是控制元素显示状态的两种常用方式。尽管它们都能达到隐藏或显示元素的目的,但两者之间存在本质的区别。本文将深入探讨这两种...

    css中display和visibility的用法和区别介绍

    在CSS中,`display`和`visibility`两个属性都是用于控制元素在页面上的显示状态,但它们的作用方式和效果有着显著的区别。 `display`属性主要影响元素的布局和类型。它有多种不同的值: 1. `block`:将元素转换为...

    CSS属性中Display与Visibility区别分析

    在CSS中,`display`和`visibility`两个属性都是用于控制元素的可见性,但它们之间存在着本质的区别。首先,`visibility`属性主要用于决定元素是否可见,而不改变元素的布局。当`visibility`设置为`hidden`时,元素的...

    selenium操作隐藏的元素(python+Java)

    在 HTML 中,元素可以通过多种方式来隐藏,例如使用 `display: none`、`visibility: hidden` 等 CSS 属性来隐藏元素。这些隐藏的元素在网页上不可见,但是在页面的源代码中依然存在。Selenium 无法直接操作这些隐藏...

    display与visiblity的区别.docx

    总结来说,`visibility` 与 `display` 的主要区别在于: 1. `visibility` 只改变元素的可见性,而不影响布局,元素依然占据空间。 2. `display` 不仅改变可见性,还影响元素的布局,元素从页面中完全移除或按指定...

    用js实现控件的隐藏及style.visibility的使用

    本示例主要讲解如何使用JavaScript来控制控件的隐藏与显示,特别是通过设置`style.visibility`属性来实现这一功能。下面我们将深入探讨这个知识点。 首先,`style.visibility`属性是CSS中用于控制元素可见性的属性...

    javascript经典特效---input框的隐藏显示.rar

    综上所述,JavaScript控制input框的隐藏与显示涉及到对DOM元素的操作、事件监听以及CSS样式的应用,这些都是Web开发中的基础技能。通过学习和实践,可以实现丰富的用户交互体验,提高网站的可用性和吸引力。

    JS实现“隐藏与显示”功能(多种方法)

    开发者可以根据实际的应用场景和需求,选择最适合的方法来实现元素的动态显示与隐藏,从而丰富网页的交互性。在编写这些功能时,应当注意代码的可读性和性能,避免不必要的DOM操作和定时器管理不当的问题。

    show_hid.rar_show_显示 javascript

    标题中的"show_hid.rar_show_显示 javascript"表明这是一个关于使用JavaScript来控制网页元素显示与隐藏的教程或示例。在网页开发中,JavaScript是一种广泛使用的客户端脚本语言,它可以动态改变网页内容,其中包括...

    js事件文本框不可用

    此行代码通过设置`visibility`为`hidden`来隐藏文本框。 ```html &lt;input name="name4" type="text" style="display:none" /&gt; ``` 此行代码通过设置`display`为`none`来隐藏文本框。 ```html ``` 此行代码直接创建...

    精通JavaScript(中文清晰优化版)_OCR识别处理后可标注版3

    掌握JavaScript与CSS的结合使用,尤其是通过`visibility`、`display`以及`opacity`属性控制元素的可见性和透明度,对于构建响应式、动态的网页界面至关重要。这些技能不仅提升了网页的用户体验,也为开发者提供了更...

    redacted:在截取屏幕截图之前隐藏页面上的文本

    2. **备份样式**:在隐藏文本之前,我们需要保存这些元素的原始样式信息,包括`display`、`visibility`、`opacity`等,以便之后恢复。 3. **应用隐藏样式**:使用JavaScript遍历并修改这些敏感元素的样式,例如将`...

    JS弹出层源代码

    这可以通过改变元素的CSS属性(如display或visibility)来实现。同时,还可以添加事件监听器,如点击按钮触发弹出层,或者点击弹出层外的区域关闭弹出层。 4. **封装与注释**:为了提高代码复用性和可维护性,可以...

    关闭层,而不是隐藏层

    层依然存在于页面中,只是通过CSS(Cascading Style Sheets)属性如`display:none`或`visibility:hidden`使其不可见。隐藏层的元素仍会占用一定的计算资源,对于FLV视频而言,虽然视频画面不可见,但音频可能仍在...

    前端面试题以及vue前端面试题

    17. CSS 中隐藏元素的方法:可以使用 display、visibility、opacity 等属性来隐藏元素。 18. 超链接访问后 hover 样式不出现的问题:可以使用 CSS 伪类或 JavaScript 解决。 19. Css Hack:是一种特殊的 CSS 语法,...

    css中visiblity和display异同详解

    这就是为什么 `display: none` 与 `visibility: hidden` 的关键区别。 在JavaScript操作中,比如 jQuery 的 `slideDown()` 和 `slideUp()` 方法,它们用于动态改变元素的高度以实现滑动显示或隐藏的效果。这些方法...

    js透明弹出层

    4. **显示与隐藏**:通过改变弹出层的CSS属性(如`display`或`visibility`)来控制其显示与隐藏。例如,将`display:none;`改为`display:block;`即可让弹出层显现。 5. **阻止默认行为**:如果弹出层是响应链接点击...

    cookies4L8r:使用Cookie保存文本,然后显示或隐藏它

    "cookies4L8r"项目就是基于这个原理,它演示了如何利用Cookie来保存文本内容,并根据这些保存的数据控制文本的显示与隐藏。这个项目特别关注HTML的基础应用,下面我们将详细讨论Cookie的工作原理以及如何在HTML中...

    css样式的显示和隐藏.md

    1. **CSS控制显示与隐藏**:通过设置`display:none;`可以让元素在页面上不可见,而通过更改此属性值(如`display:block;`或`display:inline;`等)可以使元素重新显示。 2. **HTML与CSS结合使用**:在HTML中定义了...

    JavaScript 第三章 DOM编程基础 使用document对象

    在实际应用中,例如“简单树形菜单素材”,可能涉及到使用JavaScript动态创建和控制DOM元素,通过点击事件改变元素的`display`或`visibility`属性来实现菜单的展开和折叠效果。 复习框全选效果素材可能涉及`...

Global site tag (gtag.js) - Google Analytics