`
txf2004
  • 浏览: 7065719 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

visibility和display区别

阅读更多

它们都可以实现对域的隐藏,但visibility要占用域的空间,而display则不会!下面是一个测试

<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>
<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>

现在不是很多网站都流行loading 字样么。

好象用这个能实现。

在网页前部加 <DIV id=Layer_Loading >正在加载请稍等……</DIV>

在网页最后加<SCRIPT>Layer_Loading.style.visibility="hidden";</SCRIPT>

分享到:
评论

相关推荐

    display与visibility的区别

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

    CSS隐藏元素 display visibility opacity的区别.docx

    在CSS中,隐藏元素的方法主要有三种:`display:none`、`visibility:hidden`和`opacity:0`,它们各自有不同的特点和适用场景。 1. `display:none`:此属性会使元素完全从页面布局中消失,不占据任何空间。元素及其...

    CSS:Visibility 和 Display 属性的比较.pdf

    总之,`visibility`和`display`在CSS中扮演着不同的角色,`visibility`关注的是元素的可见状态,而`display`则涉及元素在布局中的存在状态。了解它们的差异并合理运用,可以帮助我们更好地控制网页的显示效果和用户...

    JAVASCRIPT style 中visibility和display之间的区别

    在style属性中,有两个常用的属性可以用来控制元素的显示与隐藏:visibility和display。尽管这两个属性的目的相似,即控制元素的可见性,但它们在实现上有着明显的区别,这些区别对页面布局和元素的交互性有深远的...

    CSS:Visibility和Display属性的比较.pdf

    总的来说,`visibility`和`display`都是CSS中强大的工具,用于控制元素的可见性和布局。理解它们的区别并正确使用,可以让你在创建网页时更加灵活,同时也能避免可能对SEO产生的负面影响。在实际工作中,开发者应...

    JS中style.display和style.visibility的区别实例说明.docx

    JS 中 style.display 和 style.visibility 的区别实例说明 在 JavaScript 中,style.display 和 style.visibility 是两种常用的控制元素显隐的方法,但是它们之间有着根本的区别。 style.display style.display ...

    display和visibility的区别示例介绍

    在网页布局和样式设计中,`display` 和 `visibility` 是两个非常重要的CSS属性,它们都能用来控制元素的可见性,但实现方式和效果大不相同。本篇文章将深入探讨两者之间的区别,并通过示例来具体说明。 首先,`...

    对比: display, visibility(有代码)

    在网页设计和开发中,`display` 和 `visibility` 是两个非常重要的CSS属性,它们用于控制元素在页面上的可见性和布局。这篇博客文章通过代码示例深入探讨了这两个属性的区别和用法。 首先,`display` 属性主要用于...

    display和visibility的区别

    总结来说,`display` 和 `visibility` 的主要区别在于: 1. `visibility` 只改变元素的可见性,不改变布局,隐藏后仍保留空间。 2. `display` 不仅改变可见性,还影响布局,隐藏后不再占用空间。 在实际应用中,...

    visiblity:hidden和display:none的差异

    `visibility:hidden` 和 `display:none` 的主要区别在于,前者隐藏元素的同时保留其占据的空间,而后者则完全从布局中移除元素。这种差异在处理页面布局时尤为关键。例如,如果一个元素的 `display` 被设置为 `none`...

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

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

    CSS Display与Visibility的不同

    总之,`display`和`visibility`都是控制元素可见性的工具,但它们的核心区别在于是否保留元素的布局空间。`visibility:hidden`仅隐藏元素内容,保留空间;而`display:none`则同时移除元素及其占用的空间。了解这两者...

    display:none和visibility:hidden的差别比较与演示代码

    前言: 在使用css隐藏栏位或物件的时候, 常常会使用到display:none和visibility:hidden这两个属性, 但却很容易分不清楚这两个的差别, 或是乾脆同时使用两种属性,来确保物件一定被隐藏, 其实我们可以很简单的来...

    关于CSS属性中visibility隐藏和display消失的区别简析

    CSS中的`visibility`和`display`属性都是用来控制元素的可见性,但它们在实际应用中有着显著的区别。首先,`display:none;`会使得元素完全从页面布局中移除,不再占用任何空间。这意味着元素及其内容在文档流中不再...

    javascript获取隐藏元素(display:none)的高度和宽度的方法

    为了获取display:none元素的尺寸,一个常见的方法是临时将该元素的display属性更改为visibility:hidden,从而使其获得尺寸信息,再通过计算其样式来获得高度和宽度。但是,这会导致元素暂时变为可见,可能会在页面上...

Global site tag (gtag.js) - Google Analytics