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. nodejs-基础

    01-nodejs介绍 1.什么是nodejs 1.(javascript跑在机器端,服务端)Javascript on the machine 2.(跑在谷歌v8引擎上)A runtime for ...

  2. CODE大全告诉你java是否开始没落了

    CODE大全告诉你java是否开始没落了! 22 岁,对于一个技术人来说可谓正当壮年.但对于一门编程语言来说,情况可能又有不同.各类编程语言横空出世,纷战不休,然而 TIOBE 的语言排行榜上,Jav ...

  3. Saltstack的部署及其详解

    https://repo.saltstack.com/ Saltstack简介: salt是一个多平台基础设施管理工具通常只用在linux上,使用那个轻量级的通讯器,ZN用python写成的批量管理工 ...

  4. EXT中导出表格中的数据到Excel

    { itemId: 'excel', text: '导出', iconCls: 'btnExportExcel', disabled: false, handler: function () { // ...

  5. HTML <img>标签 创建图像映射

    初级前端一枚 下面代码是在图片上创建图像映射 自己整理了下 做个笔记 希望也可以帮助后来学习的朋友! <map name="planetmap"> <area s ...

  6. [入门向选讲] 插头DP：从零概念到入门 （例题：HDU1693 COGS1283 BZOJ2310 BZOJ2331）

    转载请注明原文地址:http://www.cnblogs.com/LadyLex/p/7326874.html 最近搞了一下插头DP的基础知识……这真的是一种很锻炼人的题型…… 每一道题的状态都不一样 ...

  7. CentOS6 安装Sendmail + Dovecot + Roundcubemail

    前言 本文是继CentOS6 安装Sendmail + Dovecot + Squirrelmail 关于邮箱服务器配置的第二篇文章,因为关于使用Sendmail进行相关配置的文章.资料等太老,而且资 ...

  8. 读书笔记 之《Thinking in Java》(对象、集合)

    一.前言: 本来想看完书再整理下自己的笔记的,可是书才看了一半发现笔记有点多,有点乱,就先整理一份吧,顺便复习下前面的知识,之后的再补上. 真的感觉,看书是个好习惯啊,难怪人家说"书籍是人类 ...

  9. 【性能测试工具】- Siege

    优点:比http_load好用,因为相同的url.txt文件在httpload不好使,所以在易用性上httpload不如siege,仍需进一步调研. 缺点:安装过程中,不能自动创建siege.log文 ...

  10. HDU 6006 Engineer Assignment：状压dp

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6006 题意: 在Google中,有个n项目,m个专家.第i个项目涉及c[i]个领域,分别为a[i][0 ...