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. 搭建hadoop、hdfs环境--ubuntu

    最近在学习hadoop相关知识,就在本机上安装了hadoop,遇到了一些坑,也学到了不少.仅此记录我的安装过程,及可能遇到的问题.供参考.交流沟通见页末. 软件准备 >  虚拟机(VMware) ...

  2. React Native 系列(七) -- ListView

    前言 本系列是基于React Native版本号0.44.3写的.几乎所有的App都使用了ListView这种组件,这篇文章将学习RN中ListView的平铺样式和分组样式. ListView平铺样式 ...

  3. 8. Andrénalin ★ Serial

    无花无壳爆破/硬编码 istcmp字符串比较 "<BrD-SoB>" 仅允许非商业转载,转载请注明出处

  4. IAT重定向之修复

    .. 仅允许非商业转载,转载请注明出处

  5. 似是而非的JS - 异步调用可以转化为同步调用吗？

    源起 小飞是一名刚入行前端不久的新人,因为进到了某个大公司,俨然成为了学弟学妹眼中'大神',大家遇到js问题都喜欢问他,这不,此时他的qq弹出了这样一条消息 "hi,大神在吗?我有个问题想问 ...

  6. macvlan 网络隔离和连通 - 每天5分钟玩转 Docker 容器技术（57）

    上一节我们创建了两个 macvlan 并部署了容器,网络结构如下: 本节验证 macvlan 之间的连通性. bbox1 能 ping 通 bbox3,bbox2 能 ping 通 bbox4.即:同 ...

  7. iOS开发中如何创建多个target

    在开发iOS应用程序的过程中,经常需要根据不同的需求,切换到不同的项目配置,或者打不同的包(测试环境.开发环境.生产环境等等),如果每次都是手动配置,一则比较麻烦,二则容易配置错,那么有没有更好的方案 ...

  8. C#写入文件的几种方式

    1. FileStream.Write string filePath = Directory.GetCurrentDirectory() + "\\" + Process.Get ...

  9. 【SpringMVC】XML配置说明

    springmvc流程:前端控制器(DispatcherServlet)-->映射器HandlerMapping-->适配器HandlerAdapter-->视图解析器ViewRes ...

  10. oracle中如何移动数据文件

    a.shutdown immediate关闭数据库  b.在os下拷贝数据文件到新的地点  c.Startup mount 启动到mount下  d.Alter database rename fil ...