【javascript】jq之display:none与visible:hidden
今天学习到jquery的hide()部分时,突然有一个想法,jquery中的隐藏/显示部分的实现是给目标元素附加一个"display: none"属性,那么如果在类似于下面的布局中运用,会发生什么情况?
先把布局的代码贴上来
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="jquery.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 150px;
text-Align: center;
border: 2px solid;
margin: 100px auto 0 auto;
}
.box .content {
width: 100%;
height: 100px;
line-height: 100px;
background: #666;
}
.box .click {
background: #ccc;
width: 300px;
padding: 15px 0;
}
</style>
<title>jquery</title>
</head>
<body>
<div class="box">
<div class="content">显示原来的内容</div>
<div class="click">
<input id="change" type="button" value="改变文字内容" />
<input id="hide" type="button" value="隐藏/显示" />
</div>
</div>
</body>
</html>
然后给两个按钮绑定上点击事件,第一个改变文字内容,第二个隐藏/显示上面的内容部分。
<script type="text/javascript">
$(function(){
$('#change').click(function(){
$('.content').html("显示改变了的内容!");
});
$('#hide').click(function(){
$('.content').fadeToggle();
});
});
</script>
代码里的"$(function(){})"部分是"$('document').ready(function(){})"的简写,这个稍后再论。
现在点击事件绑定上了,分别点击两个按钮。
点击改变文字内容按钮:
看起来没有问题!
再点击显示/隐藏按钮:
按钮条怎么跑上面去了?
通过浏览器调试查看
可以看到jquery是通过给元素附加了"display: none"而达到效果的。
上网查了一下,"display:none"的作用是吧某个元素隐藏起来,并且不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失。这样就造成了下面的按钮块向上浮动了。如何解决这个问题呢?
我首先想到的是把按钮块给固定在box框的底部,这样不论上面元素块是否存在,都不会影响到下面的按钮块的位置。
要达到这样的效果,首先得把按钮块从文档流中弹出,使文档流中的元素无法影响到这个元素的位置,浮动"float"和绝对定位"absolute"可以达到目的。
不过当用浮动实现时,发现点击显示/隐藏按钮,由于内容块忽而显示忽而消失,导致按钮块内的按钮元素也随之移动,显然内容块是否存在对浮动元素的位置是有影响的,这样显然是失败的。
当使用绝对定位时,通过计算其坐标,倒是达到了效果,不过如果父元素块的布局稍微发生改变,按钮块绝对定位的位置却没有变化(绝对定位基于body),这样显然破坏了该结构的布局,这样的布局是脆弱的,不是我们想要达到的效果。
显然通过布局来解决这个问题是不现实的。那就从其他方面入手。
元素的隐藏有两个方法:display:none和visible:hidden。
两者都可以将元素给隐藏起来,不过有所区别:
display:none
不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。
visible:hidden
使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。
这样就找到方法了!将隐藏的实现由"display:none"更改为"visible:hidden"就行了。
于是js代码更改为:
$(function(){
$("#change").toggle(function(){
$(".content").html("显示改变的内容");
},function(){
$(".content").html("显示原来的内容");
});
$("#hide").toggle(function(){
$(".content").css("visibility","hidden");
},function(){
$(".content").css("visibility","visible");
});
});
完美解决了问题!
总结:
就像脑筋急转弯,有时候换个思路想一想,其实问题很简单。
【javascript】jq之display:none与visible:hidden的更多相关文章
- jq之display:none与visible:hidden
http://www.cnblogs.com/linxiong945/p/4075146.html 今天学习到jquery的hide()部分时,突然有一个想法,jquery中的隐藏/显示部分的实现是给 ...
- Readonly和disabled的区别 display:none和visible:hidden的区别
怎样使input中的内容为只读,也就是说不让用户更改里面的内容. <input type="text" name="input1" value=" ...
- display:none与visible:hidden的区别 slideDown与
display:none与visible:hidden的区别 display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被 ...
- display:none与visible:hidden的区别
display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就 ...
- display:none与visible:hidden区别
if(list.style.display=='none'){ list.style.display='block'; }else{ ...
- display:none和visible:hidden两者的区别
display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别:display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是 ...
- CSS中:display:none与visible:hidden的区别
display:none视为不存在且不加载,即,不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. visibility:hidden隐藏,但在浏览时保留位置,即,使对象在网页上不可见,但该对 ...
- display:none和visibility:hidden区别
<!-- display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: --> <!-- display:none 不为被隐藏的对象保留其物理空 ...
- visible:hidden和dispaly:none的区别
display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就 ...
随机推荐
- c语言和java以及安卓和苹果
苹果手机是本地,没有中间环节,速度快,基于Linux系统 安卓是通过虚拟机,影响速度 就像c语言和java c适用于架构小的地方,因为直接编译运行 而java用于架构比较大的地方,启动慢,启动之后效率 ...
- Java内存模型(转载)
本文章节: 1.JMM简介 2.堆和栈 3.本机内存 4.防止内存泄漏 1.JMM简介 i.内存模型概述 Java平台自动集成了线程以及多处理器技术,这种集成程度比Java以前诞生的计算机语言要厉害很 ...
- 洛谷P1501 [国家集训队]Tree II(打标记lct)
题目描述 一棵n个点的树,每个点的初始权值为1.对于这棵树有q个操作,每个操作为以下四种操作之一: + u v c:将u到v的路径上的点的权值都加上自然数c: - u1 v1 u2 v2:将树中原有的 ...
- Autoconf 中文手册
Autoconf Autoconf Creating Automatic Configuration Scripts Edition 2.13, for Autoconf version 2.13 D ...
- opencv——阈值分割图像
#include "stdafx.h" #include "opencv2\opencv.hpp" using namespace cv; IplImage* ...
- Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法
最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称 样例: 图二是鼠标移动到名称显示的,怎 ...
- Web Server 在iis上部署webservice基于oracle
在iis上部署webservice基于oracle 常见错误及解决方案: 原因: 先安装.netframework后安装iis造成的: 解决方案: 1.C:\Windows\Microsoft.NET ...
- linux和windows之间的文件压缩和解压缩以及^R的问题
推荐大家使用zip压缩和解压,因为zip一般是linux系统自带: 一.zip和unzip 1. zip压缩 zip -r myfile.zip ./web 将当前目录里的web下的所有文件和文件夹全 ...
- Postman使用手册3——环境变量
一.环境变量 当使用API的时候,你可能经常需要使用不同的设置.环境设置可以让你使用变量自定义request.这个方法可以让你轻松的在不同的设置之间改变而不用改变你的request.你不需要担心要记住 ...
- fdisk命令总结
fdisk - Partition table manipulator for Linux 一.通过fdisk -l 查看机器所挂硬盘个数及分区情况: fdisk 能划分磁盘成为若干个区,同时也能为每 ...