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. 使用ngx_lua构建高并发应用

    http://blog.csdn.net/chosen0ne/article/details/7304192

  2. CTF实验吧让我进去writeup

    初探题目 两个表单,我们用burp抓包试试 这时候我们发现Cookie值里有个很奇怪的值是source,这个单词有起源的意思,我们就可以猜测这个是判断权限的依据,让我们来修改其值为1,发送得到如下显示 ...

  3. 1015 Reversible Primes (20)（20 point(s)）

    problem A reversible prime in any number system is a prime whose "reverse" in that number ...

  4. rabbit：Mnesia could not connect to any nodes

    环境: rabbitmq集群   2台机器,挂了一台后重启服务,发现在服务启动不了错误如下: 这里rabbit连接不商rabbit02这里这个服务也无法启动 解决办法: rabbitmq默认的数据库位 ...

  5. Django 模板中使用css, javascript

    Django 模板中使用css, javascript (r'^css/(?Ppath.*)$', 'django.views.static.serve', {'document_root': '/v ...

  6. Linux系统内存管理

    <linux 内存管理模型> 下面这个图将Linux内存管理基本上描述完了,但是显得有点复杂,接下来一部分一部分的解析. 内存管理系统可以分为两部分,分别是内核空间内存管理和用户空间内存管 ...

  7. django中日志配置

    # ======日志配置====== # 错误优先级:NOTSET < DEBUG < INFO < WARNING < ERROR < CRITICAL # Djang ...

  8. 下载 ....aar jitpack.io 打不开。

    下载 ....aar aar 是 安卓的 打包. 相对与jar 就是可以打包android的资源 比如res下的 . ------ jitpack.io  打不开. ====== 这个是jcenter ...

  9. 直接插入排序之Java实现

    直接插入排序之Java实现 一.方法一 package cn.com.zfc.lesson21.sort; import java.util.Arrays; /** * * @title Insert ...

  10. SpringBoot+SpringSecurity+Thymeleaf认证失败返回错误信息踩坑记录

    Spring boot +Spring Security + Thymeleaf认证失败返回错误信息踩坑记录 步入8102年,现在企业开发追求快速,Springboot以多种优秀特性引领潮流,在众多使 ...