style=“display:none” 隐藏页面元素:

<html>

<head>

<script type="text/javascript">

function removeElement()

{

document.getElementById("p1").style.display="none";

}

</script>

</head>

<body>

<h1>Hello</h1>

<p id="p1">This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.</p>

<input type="button" onclick="removeElement()"

value="Do not display paragraph" />

</body>

</html>

当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。

通过以下代码，比较两者之间的差异:

<h1>display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试</h1> 

<P><SPAN id="oSpan" style="background-color: #CFCFCF;">This is a SPAN</SPAN> in a sentence.</P> 

<P> 

    <input type=button value="Inline" onclick="oSpan.style.display='inline'"> 

    <input type=button value="Block" onclick="oSpan.style.display='block'"> 

    <input type=button value="None" onclick="oSpan.style.display='none'"> 

    <input type=button value="Hidden" onclick="oSpan.style.visibility='hidden'">

    <input type=button value="Visible" onclick="oSpan.style.visibility='visible'"> 

</P>

style="visibility: hidden"和 style=“display:none”之间的区别的更多相关文章

  1. style="visibility: hidden" 和 style=“display:none”区别

    大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的. visibility属性用来确定元素是显示还是隐藏的,这用visibility=& ...

  2. Html style="visibility:hidden"与style="display:none"的区别

    style="visibility:hidden": 使对象在网页上隐藏,但该对象在网页上所占的空间没有改变. style="display:none": 使对 ...

  3. JS中style.display和style.visibility的区别

    在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示,在style.display=block和style.visibility=visible的时 ...

  4. CSS样式“display:none”与“visibility:hidden”区别

    CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: <!DOCTYP ...

  5. 个人收集（转载）CSS中 display:none和visibility:hidden的区别

    visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...

  6. [HTML/CSS]display:none和visibility:hidden的区别

    写在前面 在群里有朋友问这样一个问题,display:none的标签,影响了布局.这就引出了本篇这样的问题,印象中display:none的块元素是不占位置的. 一个例子 <!DOCTYPE h ...

  7. display:none和visibility:hidden区别

    <!-- display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: --> <!-- display:none 不为被隐藏的对象保留其物理空 ...

  8. display:none和visibility:hidden两者的区别

    display与元素的隐藏 如果给一个元素设置了display: none,那么该元素以及它的所有后代元素都会隐藏,它是前端开发人员使用频率最高的一种隐藏方式.隐藏后的元素无法点击,无法使用屏幕阅读器 ...

  9. display：none和visibility:hidden

    w3school学习网:https://www.w3school.com.cn/tiy/t.asp?f=hdom_style_display_none display: none----将元素的显示设 ...

随机推荐

  1. OpenCV 颜色空间转换参数CV_BGR2GRAY改变

    OpenCV的颜色空间转换函数:   C++: void cvtColor(InputArray src, OutputArray dst, int code, int dstCn=0 )   参数d ...

  2. 【AtCoder】ARC062F - AtCoDeerくんとグラフ色塗り / Painting Graphs with AtCoDeer

    题解 考虑一个点双(因为是简单环),如果没有环(两点一线),那么乘上K 如果有一个环,那么用polya定理,每个置换圈有gcd(i,n)个循环节 如果有两个及以上的环,任何一种置换都合法,那么只和每个 ...

  3. thinkphp5.0与thinkphp3.2之间的区别

    5.0版本和之前版本的差异较大,本篇对熟悉3.2版本的用户给出了一些5.0的主要区别. URL和路由 5.0的URL访问不再支持普通URL模式,路由也不支持正则路由定义,而是全部改为规则路由配合变量规 ...

  4. [leetcode tree]95. Unique Binary Search Trees II

    Given an integer n, generate all structurally unique BST's (binary search trees) that store values 1 ...

  5. Fiddler手机抓包，相关细节回顾

    目录 0. 准备工作 1. Fiddler配置 2. iPhone配置 3. 抓包示例 上篇Fiddler教程,我们教了大家Fiddler安装配置及如何使用Fiddler进行基本的Http抓包及模拟请 ...

  6. 怎么处理stdClass::__set_state

    处理后 处理方法 function object2array_pre(&$object) { if (is_object($object)) { $arr = (array)($object) ...

  7. springboot配置多数据源mongodb

    参考大佬的文章 https://juejin.im/entry/5ab304dd51882555825241b3

  8. Beego 和 Bee 的开发实例

    Beego不是一般的web开发包.它构建在大量已存在的Go之上,提供了许多的功能,以下是提供的功能: 一个完整的ORM 缓存 支持session 国际化(i18n) 实时监测和重载 发布支持 ==== ...

  9. Codeforces Round #298 (Div. 2) D. Handshakes 构造

    D. Handshakes Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/534/problem ...

  10. hdu 4442 Physical Examination 贪心排序

    Physical Examination Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...