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. Java-将多线程停止的两种方法

    线程如何停止呢 stop方法过时了,看起描述发现,有其他解决方案. 线程结束:就是让线程任务代码执行完,run方法结束. run方法怎么结束呢? run方法中通常都定义循环,只要控制住循环就哦了. / ...

  2. 一步一步学多线程-Timer

    在执行定时任务的时候可以用Timer来实现,现在小编对学到的进行一次总结,先来看一个demo 1 public class TimerTest { 2 3 public static void mai ...

  3. 给Web前端初学者的一些建议和学习路线

    做web前端开发能有10多年的时间,晚上编辑一篇文章,给初学者说一些建议.   学习 HTML,CSS 应该先跟着基础的视频学一遍.然后就需要做大量的练习,案例,案例是非常重要的,应用到实处,做各种常 ...

  4. RMAN基础恢复测试

    --RMAN恢复测试实战   RMAN> list backup;   using target database control file instead of recovery catalo ...

  5. JavaScript高级程序设计 - 阅读笔记

    [本博客为原创:http://www.cnblogs.com/HeavenBin/] 前言: 大致花费了一个星期的时间把这本书认真看了半本,下面是我做的阅读笔记,希望能够让看这本书的人有个大致的参考. ...

  6. 使用ant插件打包生成jar文件

    1.环境 新版Eclipse中已经集成了Ant插件,在Preferences中可以看到.(2017版) 旧版本的Eclipse如果没有集成Ant插件,安装配置方法在文档最后. 2.使用教程 (1)新建 ...

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

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

  8. JavaScript的8行代码搞定js文件引入问题

    单页面的操作,免不了会有各种jsp的嵌套问题,一个操作页面里面可能涉及到几十甚至上百个jsp页面. 平常我们对用到的js文件的引入,都会放到index的header里面.如图: 但是,让我们思考三个问 ...

  9. elasticsearch报错expected <block end>, but found BlockMappingStart解决方法

    我用的是elasticsearch2.4.0,在修改完配置文件就出现类似格式 expected <block end>, but found BlockMappingStart...... ...

  10. 当使用composer安装组件时提示错误

    这种情况可以重装一下fxp/composer-asset-plugin 具体命令: php composer.phar global require "fxp/composer-asset- ...