display:block/none与visibility:visible/hidden的区别

最新推荐文章于 2024-05-03 12:12:21 发布
最新推荐文章于 2024-05-03 12:12:21 发布
阅读量5.5k 收藏 2
点赞数 1
分类专栏： html js 文章标签： html js 隐藏域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013400939/article/details/44452605
版权
js 同时被 2 个专栏收录
3 篇文章 0 订阅
订阅专栏
html
2 篇文章 0 订阅
订阅专栏

display:none和visibility:hidden

都是将网页上的某个元素隐藏一起来，但是display:none会连原先元素的位置一并隐藏

visibility:hidden则只是让这个元素变的透明，它所占的位置还是在页面上。

block与hidden类似 都是将网页上的某个元素显示在页面上

用JS实现隐藏域的显示与隐藏

例：

<html>
<body>
<title>隐藏文本</title>
<script language="javascript">
   function testVisibility()
   { 
        document.all("tb_0").style.display="none";
        document.all("tb_1").style.display="block";
   }
   function testDisplay()
   {  
        document.all("tb_0").style.display="block";
        document.all("tb_1").style.display="none";
   }
   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
<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>


Logica_
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css中display和visibility的用法和区别介绍
12-11
Display的属性值 block：/*表现为一个块级元素（一般情况下独占一行）*/当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像<DIV>元素一样，它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block，使其可以像<DIV>一样工作。inline:/*表现为一个行级元素（一般情况下不独占一行）*/ 将display设置为inline，将使其行为和元素inline一样—即使它是普通的块元素如<DIV>，它也将会被组合成像<span>那样的输出流。none:/*元素不可见，并且不为其保留相应的位置*/最后是display被
display和visibility的区别
deze0926的博客
03-16 498
一、display和visibility的相同与不同点 1、相同点：display和visibility都有讲元素隐藏的意思 2、不同点：display是元素隐藏，隐藏的元素不占文档流 　　　　　　而visibility隐藏的元素仍然占文档流 二、display和visibility的属性值 1、display 　　display：block；将元素设置为块级元素，独...
CSS元素的显示与可见性（详解Display和Visibility的用法）
最新发布
百赢出品，必属精品
05-03 2037
1.DisplayDisplay主要用于控制元素的布局方式，包括块级、行内、弹性布局和网格布局等。Visibility主要用于控制元素的可见性，即元素是否在页面中可见，但不影响布局。display属性display属性用于定义元素应该生成的框的类型。常见的display属性值包括：none: 元素不会被渲染在页面上，且不占据空间。block: 元素被渲染为块级元素，占据一整行。inline: 元素被渲染为内联元素，不会独占一行，与其他内联元素在一行内显示。
CSS中Visibility和Display的区别
素象专栏F#5ebFydvZcX
10-22 5476
     http://www.devx.com/tips/Tip/13638    CSS中的visibility和display两个属性很容易被混淆，因为它们看起来是做同样的事情，但实际上，这两个属性是完全不同的。 visibility属性用来设置一个给定的元素是否显示（visibility="visible|hidden"），但是，虽然一个元素的visibility被设置为hidden，
CSS属性display和visibility 区别
Hynson的学习笔记
02-22 2381
说明w3school 中设置display元素如何被显示，visibility设置元素是否可见。display 和visibility 都是用于设置或检索是否显示对象， 最大区别： display隐藏对象不保留物理空间； visibility隐藏对象保留占据的物理空间； 但是一般是不赞成使用 visibility:hidden，建议使用display:none，因为当浏览器渲染被占据的物理空
详解css3中display和visibility的区别
aibai666的博客
12-15 1098
在css3中，display和visibility都具备对元素进行隐藏和显示的功能。 display语法 display:none | block /*none表示隐藏 block表示显示*/ visibility语法 visibility:hidden | visible /*hidden表示隐藏 visible表示显示*/ 其中要区分两者的区别很简单，尝试将两者直接翻译过来，display就是显示，而visibility就是可视性的意思 再看看两者在实际的代码效果中的表现 原图:
css visibility和display属性区别
little_newBee的博客
01-19 584
visibility有两个值分别是：visible和hidden，意思分别是显示和隐藏，不过，当表现为隐藏时，次元素仍然没有脱离流，正常占据它的位置 display有三个值分别是：inline，block，none。inline表现为行内元素，例如：div这个元素给它加inline则表现的跟span这个元素一样可以多个显示在一行；block为默认值，就是      正常的显示，而none就是表
display和visibility的区别示例介绍
11-30
display通常可以设置为none、inline、block visibility通常可以设置为hidden、visible 当display为none，visibility为hidden时，元素都会不见。不过其还有不同之处。 display会将元素隐藏掉，并且位置不再被占据，而...
CSS属性中Display与Visibility区别分析
09-25
在CSS中，`display`和`visibility`两个属性都是用于控制元素的可见性，但它们之间存在着本质的区别。首先，`visibility`属性主要用于决定元素是否可见，而不改变元素的布局。当`visibility`设置为`hidden`时，元素的...
JS中style.display和style.visibility的区别实例说明
12-10
在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示，在style.display=block和style.visibility=visible的时候，元素被显示，在style.display=none和style.visibility=hidden的时候，元素...
css：display和visibility的区别
Mia_shaungchen的博客
06-14 463
display和visibility的区别： 1. visibility属性用来确定元素是显示还是隐藏的，这用visibility="visible|hidden"来表示。 当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。2. display被设置成none时，元素消失，所占的位置也不存在了，也就是将元素从页面中移走。后面的元素会自动
display的block、none、inline属性及解释
某年某月某条街
08-21 2699
display:block的作用： 让被隐藏的块级元素显示出来，一般是相对于diplay:none;使用的 比较常用于a、span这两个标签——因为这两个标签非块元素，如果不用display:block;定义一下，那么定义width、height等和长宽相关的css属性时会发现完全不生效。 display:block不换行的办法： 设置display属性为inline-block，则不会换行
元素的显示和隐藏（display、visibility、overflow）
qq_43623147的博客
12-13 960
类似网页广告，当点击关闭就不见了，但重新刷新页面，就会重新出现。 本质：让元素在页面中显示或者隐藏。 一、display 显示 display属性用于设置一个元素如何显示。 display: none; 隐藏对象 display: block; 转换为块级元素；显示元素 display隐藏元素后，不再占有原来的位置。 二、visibility 可见性 visibility属性用于指定一个元素可见还是隐藏。 visibility: visible; 元素可视 visibility: hidd
display和visibility的用法和区别
weixin_30485291的博客
11-30 799
display和visibility的用法和区别 更多 2013/11/17 来源：css学习浏览量：892 学习标签： css display visibility 本文导读：大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。visibility和display两个属性都有隐藏元素的功能。visibility属性所...
display,visibility和visible的区别
bymyself11的专栏
09-22 1170
1）display 　　　　隐藏必须使用none值，该隐藏不占位，页面源代码可见。 　　　　显示可使用空或block或inline，意思分别为：无此属性、显示视为div（有换行符）、显示视为span（无换行符）。 　　2）visibility 　　　　隐藏必须使用hidden值，该隐藏占位，页面源代码可见。 　　　　显示可使用空或visible，意思分别为：无此属性、显示。 　　3）v
css中visibility与display的区别
半亩方塘
08-29 730
CSS中的visibility与display是二个容易让人搞混的东西，在这里简单的记录一下它们的区别：visibility隐藏对应的元素但不挤占该元素原来的空间；也就是说虽然隐藏起来了，但是它原来占用的空间块还是保留着，只是变成空白的而已。display隐藏对应的元素并且挤占该元素原来的空间；也就是说隐藏后，则其原来的占用的空间也就没有了。
css overflow属性，display和visibility的区别
清风了了的博客
05-23 9061
overflow规定当内容溢出元素框时发生的事情。overflow：visible 默认值，内容不会被修剪，会呈现在元素框之外。overflow：hidden 内容会被修剪，并且其余内容是不可见的。overflow：scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。overflow：auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。overflow：inheri...
css中display和visibility的用法和区别
学习也休闲
11-17 802
Display的属性值   block： /*表现为一个块级元素（一般情况下独占一行）*/ 当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像元素一样，它会在那个点被放入到页面中。(实际上你可以设置的display:block，使其可以像一样工作。 inline: /*表现为一个行级元素（一般情况下不独占一行）*/ 将display设置为
display:none和和visibility:hidden的差别比较与演示代码的差别比较与演示代
09-09
display:none和visibility:hidden都是控制元素不显示的属性。它们之间的主要差别是显示方式的不同。 display:none会将元素从页面流中完全删除，即使元素占据了一定的空间，但它不会在页面上展示任何内容。相当于元素不存在。 visibility:hidden则是将元素隐藏起来，但仍然占据空间。换句话说，元素仍然存在于页面流中，只是不可见。 由于display:none从页面中删除元素，所以隐藏和显示这个元素都需要重新渲染整个页面，这会导致页面的重新布局和重新绘制，可能会产生额外的开销。而visibility:hidden只是将元素隐藏，所以在显示和隐藏时不需要重新渲染页面，性能上相对会更好一些。 下面是一个简单的演示代码来比较两者的差别： <html> <head> <style> #element1 { display: none; } #element2 { visibility: hidden; } </style> </head> <body> <h1>display:none与visibility:hidden的比较</h1> <div id="element1">我是display:none，隐藏的内容</div> <div id="element2">我是visibility:hidden，隐藏的内容</div> <button onclick="toggleDisplay()">切换显示和隐藏（display:none）</button> <button onclick="toggleVisibility()">切换显示和隐藏（visibility:hidden）</button> <script> function toggleDisplay() { var element = document.getElementById("element1"); element.style.display = element.style.display === "none" ? "block" : "none"; } function toggleVisibility() { var element = document.getElementById("element2"); element.style.visibility = element.style.visibility === "hidden" ? "visible" : "hidden"; } </script> </body> </html> 点击按钮会切换两个元素的显示和隐藏，观察页面的变化可以更好地理解display:none和visibility:hidden的差别。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值