none，hidden和opacity="0"均可设置元素为不可见的状态。其中none属于display的属性值，hidden属于visibility的属性值。使用none时元素不会再占用空间，如果原先占用空间，当dispaly变为none时，其他元素会替补它原先的位置。而使用hidden时元素仍然占用空间，其他元素不会替补它原先的位置。opacity 属性设置元素的不透明度，元素的不透明度级别描述了透明度级别，默认情况下不透明度为 1 时表示完全不透明（即完全可见），透明度为 0 时表示完全透明，即元素不可见，但元素仍然占据空间，其他元素不会替补它原先的位置。

<html>

<head>

<meta charset="UTF-8">

<script>

function none()

{

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

//    document.getElementById("p1").style.visibility="hidden";

}

</script>

</head>

<body>

<img id="p1" src="img/ceshi.jpg">

<p>第一段文本，第一段文本，第一段文本，第一段文本，第一段文本，第一段文本，</p>

<p>第2段文本，第2段文本，第一段文本，第一段文本，第一段文本，第一段文本，</p>

<p>第3段文本，第3段文本，第一段文本，第一段文本，第一段文本，第一段文本，</p>

<button onclick="none()">隐藏</button>

</body>

</html>

这是未设置所有属性之前的情况。

1.当点击按钮，属性display变为none时，显示如图所示，下面文字会替补原先图片的位置。

2.

<script>

function none()

{

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

    document.getElementById("p1").style.visibility="hidden";

}

</script>

更改代码，当点击按钮，属性visibility变为hidden时，如图所示，图片虽然消失，但元素仍然占据位置，底下文字不会替补上来。

3.更改代码，当点击按钮，属性opacity 属性为0时，如图所示，图片虽然不可见，但元素仍然占据位置，底下文字不会替补上来。

<script>

function none()

{

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

//    document.getElementById("p1").style.visibility="hidden";

    document.getElementById("p1").style.opacity="0";

}

</script>

none，hidden和opacity="0"设置元素不可见的区别的更多相关文章

  1. display: none;、visibility: hidden、opacity=0区别总结

    display: none; 1.浏览器不会生成属性为display: none;的元素. 2.display: none;不占据空间(毕竟都不熏染啦),所以动态改变此属性时会引起重排. 3.disp ...

  2. display:none、visibility:hidden，opacity:0三者区别

    1. display:none 设置display:none,让这个元素消失 消失不占据原本任何位置 连带子元素一起消失 元素显示:display:block 2. visibility:hidden ...

  3. display:none;visibility:hidden;opacity:0;之间的区别

    什么是回流 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建.这就称为回流(reflow).每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是 ...

  4. 使用overflow：hidden之后使的同行元素不对齐

    一个父元素(块级元素)中有几个在同一水平线上的几个元素(行内块元素),设置其中某个元素的oveflow:hidden之后,会导致这几个行内元素不再是同一水平线上对齐 原因是: 1)行内元素的默认ver ...

  5. css隐藏元素display：none，opacity:0;filter：alpha(opacity=0-100;，visibility：hidden的区别

    在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.我们一般有三种方式:display:none, opacity:0;fil ...

  6. 分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

    总结: 结构: display:none: 会让元素完全从渲染树中消失,渲染的时候不占据任何空间, 不能点击, visibility: hidden:不会让元素从渲染树消失,渲染元素继续占据空间,只是 ...

  7. CSS:opacity:0,visibility:hidden,display:none的区别

    CSS中opacity=0,visibility=hidden,display=none的时候,三者有什么区别呢?? 参考了stackoverflow的博客,才发现区别如下所示: Here is a ...

  8. 关于opacity透明度子元素继承现象的若干研究以及hack方法

    [感想]信息时代的信息是有时效性的,今天是确确实实感受到了.互联网资料虽然丰富,但是质量不一,还有大量的跟风雷同,很多人都是随手拷贝过来,根本没有实践.以前端为例,这两年浏览器的迅猛发展,造成很多原有 ...

  9. jQuery使用之（二）设置元素的样式

    css是页面不能分隔的部分,jQuery中也提供了一些css相关的实用的办法.前面章节中有使用过 addClass()为元素添加css样式风格.本节主要介绍jQuery如何设置页面的样式风格.包括添加 ...

随机推荐

  1. docke镜像上传到dockerhub仓库和阿里云docker仓库的方法

    操作指南   1.  登录阿里云docker registry: $ sudo docker login --username=linjiaxin897591495 registry.cn-hangz ...

  2. C语言数组：C语言数组定义、二维数组、动态数组、字符串数组

    1.C语言数组的概念 在<更加优美的C语言输出>一节中我们举了一个例子,是输出一个 4×4 的整数矩阵,代码如下: #include <stdio.h> #include &l ...

  3. 分享一个markdownpad2的授权key

    邮箱地址:Soar360@live.com授权秘钥:GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImDHzWdD6xhMNLGVpbP2M5SN6bn ...

  4. 菜鸟帮你跳过openstack配置过程中的坑

    一:前言 对于一个以前做java全栈工程师而言,而且没学过Linux,很少用虚拟机(还是在大学的时候简单的用过),去配置openstack我想我入的坑肯定比有基础的一定要多,躺在每个坑中徘徊思索的时间 ...

  5. 正则表达式（即：匹配模式Pattern）

    通过学习<正则表达式-Regular-Expression-Tutorial.pdf>这份文档,对正则表达式有了很好的了解,原因只有1个--这份文档写得太好了. 它的下载地址是:http: ...

  6. C/C++ 知识点---字符串函数

    1.strcpy字符串拷贝2.strcmp字符串比较3.strstr字符串查找4.strDelChar字符串删除字符5.strrev字符串反序6.memmove拷贝内存块7.strlen字符串长度 - ...

  7. 学习笔记TF051:生成式对抗网络

    生成式对抗网络(gennerative adversarial network,GAN),谷歌2014年提出网络模型.灵感自二人博弈的零和博弈,目前最火的非监督深度学习.GAN之父,Ian J.Goo ...

  8. 在学习泛型时遇到的困惑经常与func<T,U>混淆

    在学习泛型时遇到的困惑经常与func<T,U>混淆,总认为最后一个值是返回类型.现在区分一下,原来问题出在泛型委托上. C#委托的介绍(delegate.Action.Func.predi ...

  9. 【Linux 网络】网络测试命令 长期更新

    一.网络测试命令 1.测试 网络连接 发送两包后停发 [oracle@hadoop ~]$ PING www.a.shifen.com (() bytes of data. bytes from tt ...

  10. 记一次Spring aop的所遇到的问题

    由来 项目中需要实现某个订单的状态改变后然后推送给第三方的功能,由于更改状态的项目和推送的项目不是同一个项目,所以为了不改变原项目的代码,我们考虑用spring的aop来实现. 项目用的是spring ...