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. HBase（六）HBase整合Hive，数据的备份与MR操作HBase

    一.数据的备份与恢复 1. 备份 停止 HBase 服务后,使用 distcp 命令运行 MapReduce 任务进行备份,将数据备份到另一个地方,可以是同一个集群,也可以是专用的备份集群. 即,把数 ...

  2. markdown转换为html

    想要自己实现markdown编辑器,欲使用markdown-it作为编辑器,有着比较多的插件,可以实现代码高亮以及对数学公式转换等功能. // Activate/deactivate rules, w ...

  3. Django实战（8）：对比RoR与Django的输入校验机制

    rails有一个”简洁.完美的验证机制,无比强大的表达式和验证框架“.在<Agile Web Development with Rails 4th>一书的7.1节向我们展示了如何验证Pro ...

  4. api设计 - php 接口 token 数据加密

    最近在用php写app的接口,有一些疑问 首先关于token(令牌)token是用户登录的时候生成的 用户token在服务端保存入库 客户端则缓存在本地 大部分接口都要求客户端发送token 和服务端 ...

  5. 2017-2018-1 20179202《Linux内核原理与分析》第八周作业

    一 .可执行程序的装载 1. 预处理.编译.链接 gcc –e –o hello.cpp hello.c //预处理 gcc -x cpp-output -S -o hello.s hello.cpp ...

  6. [Luogu5105]不强制在线的动态快速排序

    首先集合去重不影响答案,然后打表易得连续自然数平方差异或前缀和的规律,于是问题就变为在线维护区间求并同时更新答案,set记录所有区间,每次暴力插入删除即可.由于每个区间至多只会插入删除一次,故均摊复杂 ...

  7. hdu 4462 第37届ACM/ICPC 杭州赛区 J题

    题意:有一块n*n的田,田上有一些点可以放置稻草人,再给出一些稻草人,每个稻草人有其覆盖的距离ri,距离为曼哈顿距离,求要覆盖到所有的格子最少需要放置几个稻草人 由于稻草人数量很少,所以状态压缩枚举, ...

  8. 【转载】HTTP/FTP客户端开发库：libwww、libcurl、libfetch

    网页抓取和ftp访问是目前很常见的一个应用需要,无论是搜索引擎的爬虫,分析程序,资源获取程序,WebService等等都是需 要的,自己开发抓取库当然是最好了,不过开发需要时间和周期,使用现有的Ope ...

  9. Codeforces Round #222 (Div. 1) B. Preparing for the Contest 二分+线段树

    B. Preparing for the Contest 题目连接: http://codeforces.com/contest/377/problem/B Description Soon ther ...

  10. Codeforces Beta Round #37 A. Towers 水题

    A. Towers 题目连接: http://www.codeforces.com/contest/37/problem/A Description Little Vasya has received ...