`
wang_zhi_peng2007
  • 浏览: 251812 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js中设置控件的隐藏与显示(display:none)

 
阅读更多

CSS中的display和visibility

 

css中display和visibility语法,他们都可以隐藏和显示html元素。看齐来他们很相似,所以很多人还是会搞错。
谈们的属性分别如下:

display:none|block;
display:none;时隐藏该html元素,确切的说,是在浏览器中消除该元素,不占屏幕的空间。若其下有其他元素,就会上移到该空间区域(好像桌子上有100块钱,现在我把它放在抽屉里藏起来,桌子上放100钱的地方可以放在其他任何东西)。
dispaly:block;显示已经隐藏的html元素,如果别的元素占有了该空间时,他将下移,空间重新别原来的元素占有。(把100块钱重新从抽屉里那出来放回桌子上)

visibility:hidden|visible;
visibility:hidden;隐藏该元素,正真的隐藏,但他还占有那块空间。这时,(桌子上有100块钱,这是我盖了桌布把他隐藏起来,钱还在那里)。
visibility:visible;让元素显示(拿掉了桌布,看到了100块钱)。

 

    例子:

<html>
<head>
<script type="text/javascript">
function testDisplay()
{
  /***测试Display属性***/
    var divD = document.getElementById("testD");
    if(divD.style.display=="none")
    {
        divD.style.display = "block";   /*****可见****/
    }
    else
    {
        divD.style.display = "none";    /*****不可见****/
    }
}

function testVisibility()
{
	/***测试Visibility属性***/
    var divV = document.getElementById("testV");
    if(divV.style.visibility =="hidden"){
        divV.style.visibility ="visible";
     }else{
        divV.style.visibility = "hidden";
    }
}
</script>
</head>
</body>
<div id="testD" style="border:#ddd 1px solid">
    <div style="display:block;border:#ccc 2px solid">
        <div style="visibility:visible;border:#aaa 2px solid">
        Display
        </div>
    </div>
</div>
<div id="testV" style="border:#ddd 1px solid">
    <div style="display:block;border:#ccc 2px solid">
        <div style="visibility:visible;border:#aaa 2px solid">
        Visibility
        </div>
    </div>
</div>
<input type="button" value="测试Display" onclick="testDisplay()"/>
<input type="button" value="测试Visibility" onclick="testVisibility()"/>
</body>
</html>

    运行一下框中的代码就可以看到,当testD隐藏时,里面所有的框都隐藏,而且下面的divV和按钮都上移,而当divV隐藏的时候,只有他自己隐藏了,里面的其他元素都没有隐藏。(这里主要是把里面的div元素style属性设置为display和visible,如果去掉也会隐藏,但是,按钮还是不会上移,可以试一下。)

 

 

分享到:
评论

相关推荐

    JS显示隐藏HTML控件

    - 显示/隐藏:显示是指使控件可见,隐藏则是使其不可见但保留其在DOM(文档对象模型)中的位置。 2. **CSS样式控制** - `display`属性:CSS中,`display`属性用于定义元素的显示方式。设置为`none`时,元素将不...

    点击控件显示不点击隐藏js(修订版)

    在回调函数中,我们检查目标内容的`display`样式属性,如果为`none`(即隐藏状态),则将其更改为`block`,使其显示;反之,如果为`block`(即显示状态),则更改为`none`,使其隐藏。 此外,还可以使用CSS类来控制...

    javaScript\隐藏控件的方法.doc

    隐藏控件是JavaScript中常见的需求,例如根据用户操作或逻辑条件控制界面元素的可见性。在JavaScript中,有以下两种主要方法来实现这一功能: 1. **设置`style.display`属性** 当我们需要完全从页面中移除一个...

    js控制页面控件隐藏显示的两种方法介绍

    这种方法类似于.NET中控件属性设置为`display=dynamic`的效果,即控件在隐藏时会从布局中消失,并在显示时重新占据布局空间。 总结: 使用`visibility`属性和`display`属性来控制页面控件的显示和隐藏,是两种常用...

    js将控件隐藏及display属性的使用介绍

    用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性。当style.display=”block”或style.visibility=”visible”时控件或见,当style.display=”none”或style....

    js设置控件的隐藏与显示的两种方法

    用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性。 当style.display=”block”或style.visibility=”visible”时控件或见,当style.display=”none”或style....

    javascript控件开发之可见控件(2)

    JavaScript控件开发是Web开发中的重要一环,它允许我们创建具有特定功能和交互的用户界面元素。在“javascript控件开发之可见控件(2)”这个主题中,我们将深入探讨如何在JavaScript中构建可控制其可见性的控件,并且...

    textbox控制calendar的隐藏于显示

    在本案例中,我们探讨了如何通过 ASP.NET Web Forms 中的 TextBox 控件触发 Calendar 控件的显示与隐藏,以及如何将用户在 Calendar 控件中选择的日期设置到 TextBox 控件中。 ##### 1.1 控件介绍 - **TextBox ...

    js 控件 简单好用的js控件

    根据提供的文件信息,我们可以分析并总结出与“js 控件”相关的知识点。下面将详细介绍这些知识点,以便更好地理解和应用。 ### 1. JS 控件概述 JS 控件是指使用JavaScript语言开发的一种用户界面组件,这类组件...

    编程开发-综合控件-网页密码框显示隐藏密码(JQUERY) 免费版.zip

    例如,我们可以设置按钮的样式,使其与页面其他元素协调: ```css #togglePassword { background-color: #f0f0f0; border: none; color: #333; padding: 5px 10px; text-align: center; text-decoration: none...

    js日历控件日历控件

    本文将深入探讨“js日历控件”的相关知识点,包括其原理、实现方式以及如何在实际项目中应用。 日历控件JS,顾名思义,是使用JavaScript语言编写的用于在网页上展示日历的组件。JavaScript,作为客户端脚本语言,...

    js将控件隐藏的方法及display属性介绍

    用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性。当style.display=”block”或style.visibility=”visible”时控件或见,当style.display=”none”或style....

    js日期控件 js日期控件

    JavaScript日期控件是Web开发中常见的一种元素,用于在网页上提供用户友好的日期选择功能。在不依赖外部库如jQuery UI或Bootstrap Datepicker的情况下,开发者可以使用原生JavaScript来创建自定义的日期选择器。以下...

    js打印控件

    这时,可以使用CSS的`display:none`属性,然后在打印样式中重新设置为可见,实现这一目的。 4. **预览功能**:为了提供更好的用户体验,可以创建一个打印预览功能,让用户在正式打印前查看调整后的效果。这可以通过...

    asp.net选项卡控件代码

    ### ASP.NET 选项卡控件实现与自定义样式详解 #### 一、ASP.NET选项卡控件概述 在Web开发中,选项卡控件是非常常用的一种界面元素,它可以帮助用户在一个有限的空间内浏览多个相关页面或数据集。本文将通过一个...

    ASP.NET公有六种验证控件

    - `Display`:控制错误信息的显示方式,可选Static(静态显示)、Dynamic(动态显示)或None(不在当前控件显示,但在ValidationSummary中显示)。 - 占位符:当Display设置为Static时,用于显示错误信息的空间。 ...

    JS控制HTML元素的显示和隐藏的两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位。  方法一: document.getElementById("EleId").style.visibility=...

    可自由隐藏框架的javascript代码

    在JavaScript编程中,"可自由隐藏框架"通常指的是在网页中使用JavaScript来控制IFrame(内联框架)的显示与隐藏。IFrame是一种在HTML页面中嵌入另一个HTML页面的技术,常用于实现部分内容的动态加载或者创建多窗口的...

    ASPnet(C#)中的DIV的显示隐藏问题

    ### ASP.NET中DIV的显示与隐藏技巧 在ASP.NET Web应用程序开发中,用户界面的动态控制是一项非常重要的技能。特别是对于那些需要根据用户操作或某些条件来改变显示内容的应用程序来说,能够有效地显示或隐藏控件是...

Global site tag (gtag.js) - Google Analytics