控制html元素的隐藏问题
控制元素隐藏的方式,有display:none、visibility:hidden以及不透明度设置。
一、display:none
被隐藏的元素,在页面中不占位,空出的位置会被相邻的元素占用。
<div id="div0" style="width:100px; height:100px;background:blue"></div>
<div id="div1" style="width:100px; height:100px;background:green;display:none"></div>
<div id="div2" style="width:200px; height:200px;background:red"></div>
效果图如下:
由图可见,div1即绿色部分空出的位子已被div2占用。
二、visibility:hidden被隐藏的元素,在页面中不显示,但是它仍然占用原来的位置,不会给相邻其他元素机会。
<div id="div0" style="width:100px; height:100px;background:blue"></div>
<div id="div1" style="width:100px; height:100px;background:green;visibility:hidden"></div>
<div id="div2" style="width:200px; height:200px;background:red"></div>
效果图如下:
由图可见,虽然div1被隐藏,变为不可见状态了,但是其原来占据的位置并未被div2占用。
三、不透明度设置,通过设置元素的透明度也可以达到隐藏元素的目的,其作用和visibility一样。
<div id="div0" style="width:100px; height:100px;background:blue"></div>
<div id="div1" style="width:100px; height:100px;background:green;opacity:0;filter:alpha(opacity=0)"></div>
<div id="div2" style="width:200px; height:200px;background:red"></div>
效果图:
控制html元素的隐藏问题的更多相关文章
- JS控制HTML元素的显示和隐藏
JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...
- jq无法获取ng-repeat元素,如何控制ng-repeat元素显示与隐藏?
之前都是在做微信小程序的页面,最近做一些html页面,页面也没什么效果,就弄了几个点击事件,控制一些元素的显示与隐藏.后面用angular来写这些页面,然后就遇到了问题,就是用ng-repeat生成的 ...
- jquery控制元素的隐藏和显示的几种方法。
组织略显凌乱,请耐心看! 使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 1.$("#id").show()表示为display:block, $("#i ...
- 如何使用T-SQL备份还原数据库及c#如何调用执行? C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用(一) span<T>之高性能字符串操作实测
如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...
- jquery控制元素的隐藏和显示的几种方法
使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 方法一 显示: $("#id").show()表示为display:block, 隐藏: $("#id&q ...
- 使用JavaScript控制HTML元素的显示和隐藏
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...
- css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- ng指令控制一个元素的影藏的与显示几种方法的使用
在ng中我们控制一个元素的显示与隐藏的方法: (1):ng-show=true/false 解释:ng-show使用的是display="block"/"none&quo ...
- JS/jquery实现鼠标控制页面元素显隐
最近网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码.像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下. ...
随机推荐
- task optimization之superglue分析
开启logging (例子F:\wamp\www\git_repos\GitHub\GeneralUtility\superglue-master\examples\src\logging.cpp) ...
- java 的关键字 native
native native 关键字说明其修饰的方法是一个原生态方法,方法对应的实现不是在当前文件,而是在用其他语言(如C和C++)实现的文件中.Java语言本身不能对操作系统底层进行访问和操作,但是可 ...
- MapReduce-线性回归
线性回归有是三个值很重要: 1. 斜率 2. 截距:x和y轴的交点值: 3. 显著性:数据偏离线性的程度,用以判断数据可以用线性表示的程度:拟合度 apache.commons.math3里面有一 ...
- Django的 admin管理工具
admin组件使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你可以在项目的 settings.py 中的 INSTALLE ...
- vue+node+mongoDB前后端分离个人博客(入门向)
最近学习了VUE,自己为了学习做了个小小的博客,功能很简单,不过开发过程中也遇到了很多坑,所以记录下来方便以后使用.欢迎大家交流学习. 功能 实现了用户注册.登录.token检测登录.用户留言.个人中 ...
- chrome从版本55开始,不再支持设置网页内容编码
Hi Everyone, Chrome 55 has removed the Encoding menu and Chrome will do auto-encoding detection no ...
- 显式等待大结局___封装成API方便控制层调用
控制层 测试用例层: 控制层示例代码: #coding=utf-8from selenium.webdriver.common.by import Byfrom selenium.webdriver. ...
- 深入理解yield(三):yield与基于Tornado的异步回调
转自:http://beginman.cn/python/2015/04/06/yield-via-Tornado/ 作者:BeginMan 版权声明:本文版权归作者所有,欢迎转载,但未经作者同意必须 ...
- Oracle 某字段值相同的取前几条数据
rank() over(partition)的使用(转载) 有的时候会遇到这样的问题,我们需要查询一张表,而且要按照业务排序,比如我需要如下的结果: 地区 日期 费用 产品编号 用 ...
- ffmpeg同步
1:ffmpeg解码流程 拆包,构建队列,解码,同步,显示 //计算视频Frame的显示时间//获取ptspts = 0;//decodec video frameavcodec_decode_vid ...