`

js隐藏域的显示与隐藏

    博客分类:
  • JS
阅读更多

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

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

二、  visibility属性的常用属性值有两个,分别为

       1、hidden: 隐藏,占位
       2、visible : 显示



示例:
<form name="form1" method="post">
   <table id="tb_0">
    <tr>
     <td>内容测试--visible</td>
    </tr>
   </table>
   <table id="tb_1">
    <tr>
     <td>内容测试--hidden</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>


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 将对象作为表格行组显示  

分享到:
评论

相关推荐

    js隐藏域显示与隐藏

    隐藏域操作经常 用到奥

    隐藏域的妙用.doc

    比如,以下代码创建了一个隐藏域,并在提交表单后,服务器端通过Request对象获取并显示隐藏域的值: ```html 隐藏域值为:" & Request("id")%&gt; ``` 综上所述,隐藏域在网页开发中有着广泛的应用,无论是身份验证...

    重写HTML---之多个隐藏域

    在HTML(超文本标记语言)中,隐藏域(hidden fields)是一种特殊类型的输入元素,用于在表单提交时传递信息,但不在用户界面中显示。它们对于存储与页面交互相关的数据,如用户会话信息、预设值或不希望用户直接...

    点击复选框出现隐藏域

    点击复选框出现隐藏域 html+js 方便简单 一般会程序的人都能看懂的。而且代码执行效率高

    js 监听 隐藏元素的变化事件

    对隐藏元素的监听,例如,隐藏的input框,普通change事件是无法监控的。

    html中隐藏域hidden的作用介绍及使用示例

    5. 模拟全局变量:在客户端使用JavaScript时,全局变量可能会丢失,通过隐藏域可以将数据临时存储在页面上,保证数据在客户端的持久性。 6. 实现特定的客户端逻辑:例如,当需要在多个小窗口中传递数据而浏览器不...

    Web应用安全:通过hidden隐藏域和URL参数文本.docx

    4. **JavaScript全局变量存储**:由于JavaScript本身不支持全局变量,因此可以在页面中创建一个隐藏域,将需要在多个脚本间共享的数据存储于此,从而实现类似全局变量的功能。 5. **窗口间通信**:在一些复杂的应用...

    Angular实现点击按钮控制隐藏和显示功能示例

    在Angular中实现点击按钮控制页面元素隐藏与显示的示例代码,主要涉及AngularJS框架的一些基本操作。通过具体实例,我们可以学习如何使用AngularJS指令和控制器来实现这一功能,这对于初学者来说是一个非常实用的...

    javascript图片上传预览

    在JavaScript中实现图片上传预览是一项常见的前端功能,它允许用户在正式上传图片到服务器之前先看到图片的效果,提供了一种良好的用户体验。这个过程通常包括选择图片、读取图片数据、处理图片(如尺寸调整)以及在...

    多选框赋值给隐藏表单域

    隐藏表单域不会在页面上显示,但可以用于存储数据,尤其在提交表单时很有用。下面我们将详细探讨如何实现多选框的值赋给隐藏表单域,并且通过一个HTML示例来展示这个过程。 首先,理解多选框的工作原理是关键。在...

    html javascript js css

    网页制作中隐藏域的妙用 在网页制作中,我们知道有一个input ="hidden"的属性,顾名思义它就是隐藏在网页中的的一个元素,并不在网页中显示出来。 那么它的作用是什么呢.作过cgi,asp,php,jsp等的朋友都知道...

    Javascript显示和隐藏ul列表的方法

    此外,CSS中也提供了display和visibility属性,用于控制元素的显示和隐藏,这在某些情况下可以与JavaScript一起使用,达到更好的效果。 最后,需要注意的是,在JavaScript中,对页面元素的操作可能会受到CSS样式的...

    纯JS实现鼠标划过时显示提示框

    "纯JS实现鼠标划过时显示提示框"这个主题涉及到了JavaScript基础、DOM操作、事件处理以及自定义插件开发等知识点。 1. **JavaScript基础**:JavaScript是网页动态效果的核心,它是一种脚本语言,可以在浏览器端运行...

    LOTUS domino BS开发 页面元素执行顺序

    原因是隐藏域的加载在JavaScript执行之后,所以在JavaScript执行FileSave命令时,`curFirstDept`的值还未更新到页面上。 **四、只读编辑状态下的域加载区别** 1. **编辑状态开启**:所有域(包括隐藏域和计算域)...

    JavaScript时间的获取

    JavaScript是Web开发中不可或缺的一部分,尤其在处理时间与日期的操作上。本文将深入探讨JavaScript如何获取时间,并通过实例展示如何实现实时更新的时间显示。 在JavaScript中,获取时间主要是通过`Date`对象来...

    谈谈AngularJs中的隐藏和显示

    在实际开发中,我们通常会将这些指令放在AngularJS控制器的作用域($scope)中,并动态地修改这些作用域变量来控制元素的显示和隐藏。如示例中的控制器定义`a2_12.controller('c2_12',['$scope',function($scope){ $...

    BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析

    在实际使用中,有时我们可能会遇到针对隐藏域(`&lt;input type="hidden"&gt;`)的验证以及程序动态赋值后的即时验证问题。本文将对这两个问题进行深入探讨,并给出解决方案。 ### 隐藏域验证问题 在 Bootstrap ...

    javascript\JS使用大全收藏

    这些事件可以用来实现动态交互,如文本框的文字显示和隐藏。 2. **样式控制**:JS 可以动态修改元素的样式,例如通过`style.backgroundColor`改变背景色,`style.color`改变字体颜色,`style.borderColor`调整边框...

    jquery点击按钮隐藏父页和引用页的iframe

    例如,你可能希望在隐藏`iframe`后显示一条消息,或者在重新显示`iframe`时提供一个选项。这些可以通过扩展上述代码来实现。 在提供的压缩包文件中,"jquery_点击按钮_隐藏父页-引用页的iframe"可能包含了示例代码...

Global site tag (gtag.js) - Google Analytics