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. Two Seals codeforces 837c

    Two Seals 一个矩形a*b,若干子矩形,子矩形中选2个,不重叠能覆盖最大 思路: 枚举: 代码: #include <cstdio> #include <cstring> ...

  2. FGPA 中的计数器Verilog语言（时钟分频器）

    在quartusII8.0中为ALTERAFPGA设置一个分频器(计数器) 输入时钟48Mhz 输出时钟9600HZ /* 实验名称: 计数器 ** 程序功能: 将48Mhz的时钟分频为9600Hz ...

  3. kube-ui安装

    kube-ui是k8s提供的web管理界面,可以展示节点的内存.CPU.磁盘.Pod.RC.SVC等信息. 1.编辑kube-dashboard-rc.yml定义文件[root@kubernetes- ...

  4. python opencv3 grabcut前景检测

    git:https://github.com/linyi0604/Computer-Vision import numpy as np import cv2 import matplotlib.pyp ...

  5. 「HNOI2018」游戏

    「HNOI2018」游戏 解题思路 首先没有锁上的门可以缩点缩掉,然后对于一扇锁上的门,如果钥匙在左边,那么右边就永远不可能到达左边,同理如果钥匙在右边,左边就永远不可能到达右边. 然后考虑一个暴力的 ...

  6. 本地文件包含漏洞（LFI漏洞）

    0x00 前言 本文的主要目的是分享在服务器遭受文件包含漏洞时,使用各种技术对Web服务器进行攻击的想法. 我们都知道LFI漏洞允许用户通过在URL中包括一个文件.在本文中,我使用了bWAPP和DVW ...

  7. 【洛谷】4310： 绝世好题【二进制DP】

    P4310 绝世好题 题目描述 给定一个长度为n的数列ai,求ai的子序列bi的最长长度,满足bi&bi-1!=0(2<=i<=len). 输入输出格式 输入格式: 输入文件共2行 ...

  8. Codeforces Beta Round #97 (Div. 1) B. Rectangle and Square 暴力

    B. Rectangle and Square 题目连接: http://codeforces.com/contest/135/problem/B Description Little Petya v ...

  9. ZOJ 2970 Faster, Higher, Stronger

    F - Faster, Higher, Stronger Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%lld &am ...

  10. BZOJ 1059: [ZJOI2007]矩阵游戏 匈牙利算法

    1059: [ZJOI2007]矩阵游戏 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2351  Solved: 1156 题目连接 http:// ...