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. Jenkins+ANT+Jmeter 接口测试的实践（转载）

    转载地址:https://testerhome.com/topics/5262 1.前言 最近感觉大家都在讲Jenkins+jmeter+ant或maven的使用,但没有说到具体怎么投入到项目使用,只 ...

  2. python学习===计算字符串中子串出现的次数。

    if __name__ == '__main__': str1 = input('input a string: \n') str2 = input('input a sub string: \n') ...

  3. 【NO.12-2】jmeter-执行脚本

    //拿jmeter举例 //要进入到jmeter工具的bin目录 //当使用其它的开源测试工具的时候,也可以参考上面这一点,即:进入到bin目录 //如果工具本身不包含bin文件,那么在工具的1级目录 ...

  4. Linux使用系统光盘作为YUM源

    --Linux使用系统光盘作为YUM源------------------------------2013/11/07 1. 挂载光盘 Linux代码   # mkdir /media/cdrom   ...

  5. Linux下C的线程同步机制

    C里提供了保证线程安全性的三种方法: (添加头文件#include<pthread.h>,pthread 库不是 Linux 系统默认的库,连接时需要使用静态库 libpthread.a, ...

  6. Fiddler设置代理（PC和Android）

    Fiddler设置 打开Fiddler,进入Tools--->Fiddler Options,勾选以下信息:   OK,就配置完成了.   PC端设置: 以火狐为例,打开选项--->高级 ...

  7. class类的初始化

    class类的初始化 C++中引入了构造器这个概念(constructor)的概念,这是在创建一个对象时被自动调用的特殊方法.  Java也引入了构造器  构造器的主要的作用就是确保每个对象都会得到初 ...

  8. 一个基于JRTPLIB的轻量级RTSP客户端(myRTSPClient)——收流篇：（三）RTSP命令解析

    一.RTSP命令简述 RTSP是用来控制实时流媒体“播放”.“暂停”.“停止”.“录像”等行为的传输协议.该协议规定了一系列命令以及这些命令的发送格式,RTSP客户端可以通过发送这些指定的命令,从而控 ...

  9. WebApp开发总结

    WebApp开发总结 框架的使用网络上都有教程,就不写了,主要记录下个人的开发总结以方便以后开发注意. css公用样式统一定义 css样式抽出复用 appearance: none; 取消系统默认样式 ...

  10. Linux 修改用户名

    0.使用root用户登录进行操作 1.删除用户相关进程 ps -ef | grep zheng236 2. 修改用户登录名 usermod zheng236 -l zheng 3.修改用户家目录 mv ...