控制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代码实现,下面就几种常见需求一起归纳一下. ...
随机推荐
- JAVA中@SuppressWarnings注解的作用
eclipse中开发JAVA代码时,经常会出现编译告警符号,影响代码可读性,也影响调试的断点符号正常显示,可以使用@SuppressWarnings注解来抑制这些告警符号的再现.1.抑制单个类型的告警 ...
- Eclipse相对路径
Eclipse将java源文件存于src文件夹,而编译生成的class文件存于bin目录下,故以下代码输出的结果为false public class FileTest { public static ...
- js操作cookie(转载:经测试可用)
/***js操作cookie,star***/ function addCookie(objName,objValue,objsec){//添加cookie var str = objName + ...
- cookie和session得区别
1.cookie 是一种发送到客户浏览器的文本串句柄,并保存在客户机硬盘上,可以用来在某个WEB站点会话间持久的保持数据. 2.session其实指的就是访问者从到达某个特定主页到离开为止的那段时间. ...
- 实验三:C分支结构程序设计
3.1 #include<stdio.h> int main(){ char a; scanf("%c",&a); if(a>=65&&a ...
- js如何获取数字占的位数~
获取整数的长度可以用以下几种方法实现: 1.调用toString方法转为字符串后取长度 var num = 123; alert(num.toString().length); 2.隐式转字符串后取长 ...
- Hibernate JavaBean.hbm.xml配置
主键生成策略: hibernate中必须设置主键 <generator> 由数据库维护: identity:用于自动生成主键方式(没有自增主键的数据库不使用eg:oracle) seque ...
- Impala源码分析
问题导读:1.Scheduler任务中Distributed Plan.Scan Range是什么?2.Scheduler基本接口有哪些?3.QuerySchedule这个类如何理解?4.Simple ...
- GlusterFS PERFORMANCE TUNING
众所周知,glusterfs对小文件而言,就是个鸡肋,特别是在一个目录下有过W的小文件图片时,ls简单就是个坑,下面我对线上的glusterfs参数做一些优化调整,调整的命令: gluster vol ...
- Oauth2.0(六):Resource Owner Password Credentials 授权和 Client Credentials 授权
这两种简称 Password 方式和 Client 方式吧,都只适用于应用是受信任的场景.一个典型的例子是同一个企业内部的不同产品要使用本企业的 Oauth2.0 体系.在有些情况下,产品希望能够定制 ...