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. bzoj 2819

    2819 思路: 手工栈: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 500005 #define ma ...

  2. js获取iframe的id

    有一个需求是在iframe页面调用父页面一个方法,开始我用window.parent.length来判断页面有几个层,但是不好用,因为我的浏览器安装了一个插件,这个插件会动态向页面插入一个iframe ...

  3. 【LOJ】#2062. 「HAOI2016」地图

    题解 我对莫队真是一无所知 这个东西显然可以用圆方树转成一个dfs序列 然后呢,用莫队计算每个询问区间的每个数出现的次数,从而顺带计算每个数字的奇偶性 但是我们要查的数字也用一个范围,可以直接用分块维 ...

  4. 【51nod】1531 树上的博弈

    题解 我们发现每次决策的时候,我们可以判断某个点的决策,至少小于等于几个点或者至少大于等于几个点 我们求最大值 dp[u][1 / 0] dp[u][1]表示u这个点先手,至少大于等于几个点 dp[u ...

  5. bzoj 3926 转换+广义后缀自动机

    思路:重点在于叶子节点只有20个,我们把叶子节点提到根,把20个trie图插入后缀自动机,然后就是算有多少个本质不同的字串. #include<bits/stdc++.h> #define ...

  6. poj1611 The Suspects（并查集）

    题目链接 http://poj.org/problem?id=1611 题意 有n个学生,编号0~n-1,m个社团,每个社团有k个学生,如果社团里有1个学生是SARS的疑似患者,则该社团所有人都要被隔 ...

  7. Mongoose关于当天日期的查询

    参考:https://blog.csdn.net/difffate/article/details/70312894 Ant Design Pro中,有关于日期的查询条件,但日期是以数字表示的 Req ...

  8. web到service简单原理例子

    这是目前的理解 附上服务端源码 package com.lsw.server; import java.io.*; import java.net.*; import java.util.HashMa ...

  9. 表格插件datatables

    具体用法查看官网 https://datatables.net/ {% load staticfiles %} <!DOCTYPE html> <html lang="en ...

  10. 【POJ】1419：Graph Coloring【普通图最大点独立集】【最大团】

    Graph Coloring Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 5775   Accepted: 2678   ...