none，hidden和opacity="0"设置元素不可见的区别
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"设置元素不可见的区别的更多相关文章
- display: none;、visibility: hidden、opacity=0区别总结
display: none; 1.浏览器不会生成属性为display: none;的元素. 2.display: none;不占据空间(毕竟都不熏染啦),所以动态改变此属性时会引起重排. 3.disp ...
- display:none、visibility:hidden，opacity:0三者区别
1. display:none 设置display:none,让这个元素消失 消失不占据原本任何位置 连带子元素一起消失 元素显示:display:block 2. visibility:hidden ...
- display:none;visibility:hidden;opacity:0;之间的区别
什么是回流 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建.这就称为回流(reflow).每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是 ...
- 使用overflow：hidden之后使的同行元素不对齐
一个父元素(块级元素)中有几个在同一水平线上的几个元素(行内块元素),设置其中某个元素的oveflow:hidden之后,会导致这几个行内元素不再是同一水平线上对齐 原因是: 1)行内元素的默认ver ...
- css隐藏元素display：none，opacity:0;filter：alpha(opacity=0-100;，visibility：hidden的区别
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.我们一般有三种方式:display:none, opacity:0;fil ...
- 分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景
总结: 结构: display:none: 会让元素完全从渲染树中消失,渲染的时候不占据任何空间, 不能点击, visibility: hidden:不会让元素从渲染树消失,渲染元素继续占据空间,只是 ...
- CSS:opacity:0,visibility:hidden,display:none的区别
CSS中opacity=0,visibility=hidden,display=none的时候,三者有什么区别呢?? 参考了stackoverflow的博客,才发现区别如下所示: Here is a ...
- 关于opacity透明度子元素继承现象的若干研究以及hack方法
[感想]信息时代的信息是有时效性的,今天是确确实实感受到了.互联网资料虽然丰富,但是质量不一,还有大量的跟风雷同,很多人都是随手拷贝过来,根本没有实践.以前端为例,这两年浏览器的迅猛发展,造成很多原有 ...
- jQuery使用之（二）设置元素的样式
css是页面不能分隔的部分,jQuery中也提供了一些css相关的实用的办法.前面章节中有使用过 addClass()为元素添加css样式风格.本节主要介绍jQuery如何设置页面的样式风格.包括添加 ...
随机推荐
- Java的三种代理模式简述
本文着重讲述三种代理模式在java代码中如何写出,为保证文章的针对性,暂且不讨论底层实现原理,具体的原理将在下一篇博文中讲述. 代理模式是什么 代理模式是一种设计模式,简单说即是在不改变源码的情况下, ...
- Github 开源：使用升讯威 Mapper（ Sheng.Mapper）与 AutoMapper 互补，大幅提高开发效率！
Github 地址:https://github.com/iccb1013/Sheng.Mapper 在上一篇幅中,简单介绍了 升讯威 Mapper( Sheng.Mapper)[http://www ...
- Vue模板内容
前面的话 如果只使用Vue最基础的声明式渲染的功能,则完全可以把Vue当做一个模板引擎来使用.本文将详细介绍Vue模板内容 概述 Vue.js使用了基于HTML的模板语法,允许声明式地将DOM绑定至底 ...
- hdu--1077--Catching Fish
思路: 1.枚举两点确定圆心,大于2不用考虑 2.逐个判断判断距圆心的距离小于1.00001符合题意 这个题,主要在求圆心上废了不少功夫,但是仍存在问题 #include<iostrea ...
- 2016 "Bird Cup" ICPC7th@ahstu--“波导杯”安徽科技学院第七届程序设计大赛
"波导杯"安徽科技学院第七届程序设计大赛 原文章网页 Contest - 2016 "Bird Cup" ICPC7th@ahstu Start time: ...
- 一个UITableViewCell的简单动画效果
实现下面UITableViewDelegate的方法: forRowAtIndexPath:(NSIndexPath *)indexPath{ CATransform3D rotation; rota ...
- Html常用标签元素
Html常用标签元素 Html常用标签元素 常用HTML标签元素结合及简介 <html></html> 创建一个HTML文档 <head></head> ...
- 如何开发自己的搜索帝国之安装ik分词器
Elasticsearch默认提供的分词器,会把每个汉字分开,而不是我们想要的根据关键词来分词,我是中国人 不能简单的分成一个个字,我们更希望 “中国人”,“中国”,“我”这样的分词,这样我们就需要 ...
- POI通过模板导出EXCEL文件
一般的EXCEL导出使用POI先创建一个HSSFWorkbook,然后通过不断创建HSSFRow,HSSFCell后设置单元格内容便可以完成导出. 这次在项目中需要用到模板,导出的内容包括(1.模板中 ...
- Android -- AsyncTask源码解析
1,前段时间换工作的时候,关于AsyncTask源码这个点基本上大一点的公司都会问,所以今天就和大家一起来总结总结.本来早就想写这篇文章的,当时写<Android -- 从源码解析Handle+ ...