display:none与visible:hidden区别
if(list.style.display=='none'){
list.style.display='block';
}else{
list.style.display='none';
}
这里的none是查询不到的
alert(list.style.display)为空值,加了display:none的元素师从文档流中删除了,所以查询不到,
这里要换个思路
if(list.style.display!='block'){
list.style.display='block';
}else{
list.style.display='none';
}
这样就可以了。
display:none与visible:hidden区别在于 前者是从文档中删除,占据的空间也随之消失,而后者仅仅是隐藏,不会去除所占据的空间,。
在占据空间上,absolute与relative情况和上面相似
感谢学妹(Adeline)的科普。
display:none与visible:hidden区别的更多相关文章
- 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 ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就 ...
- Readonly和disabled的区别 display:none和visible:hidden的区别
怎样使input中的内容为只读,也就是说不让用户更改里面的内容. <input type="text" name="input1" value=" ...
- display:none和visible:hidden两者的区别
display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别:display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是 ...
- display:none和visibility:hidden区别
<!-- display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: --> <!-- display:none 不为被隐藏的对象保留其物理空 ...
- 【javascript】jq之display:none与visible:hidden
今天学习到jquery的hide()部分时,突然有一个想法,jquery中的隐藏/显示部分的实现是给目标元素附加一个"display: none"属性,那么如果在类似于下面的布局中 ...
- jq之display:none与visible:hidden
http://www.cnblogs.com/linxiong945/p/4075146.html 今天学习到jquery的hide()部分时,突然有一个想法,jquery中的隐藏/显示部分的实现是给 ...
- CSS display:none和visibility:hidden区别
你知道CSSdisplay:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度.高度等各种属性值都将&qu ...
- CSS样式“display:none”与“visibility:hidden”区别
CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: <!DOCTYP ...
随机推荐
- iOS开发代码规范
1.关于命名 1.1统一要求 含义清楚, 尽量做到不需要注释也能了解其作用,若做不到,就加注释 使用全称不使用缩写 1.2类的命名 大驼峰式命名:每一个单词的首字母都采用大写字母例子: MFHomeP ...
- list对象排序
在数据库中查出来的列表list中,往往需要对不同的字段重新排序,一般的做法都是使用排序的字段,重新到数据库中查询.如果不到数据库查询,直接在第一次查出来的list中排序,无疑会提高系统的性能. 只要把 ...
- Android——设计原则(Design Principles)
Enchant Me Delight me in surprising ways(动画.音效...) Real objects are more fun than buttons and menus( ...
- PI-利用SoapUI 测试web service的方法介绍
在运用webservice调用数据的过程中,非常关键的一个步骤就是获取到webservice的地址,并测试webservice的连通情 况,webservice的连通测试主要是两个方面:1,查看web ...
- 2015 NOIP day1 t1 神奇的幻方 模拟
神奇的幻方 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.luogu.org/problem/show?pid=2615 Descri ...
- delphi Sender和Tag的用法1
Sender和Tag的用法 在它们共同的OnClick事件下返回单击的那个按钮的标题 unit Unit1;interfaceuses Winapi.Windows, Winapi ...
- [置顶] 递归 加引用 实现tree 和 无限级菜单
<?php class k_model_menu_menu { private $data = array(); private $rdata = array(); pr ...
- LumiSoft.Net邮件接收乱码问题解决
本文非本人编写,转载自:http://www.cnblogs.com/youngerliu/archive/2013/05/27/3101488.html 今天遇到用LumiSoft.Net这个组件收 ...
- Mac OS X 系统目录结构
在OS X的系统中,不再有Windows用户熟悉的C盘.D盘,这是因为OS X底层是Unix系统,其目录机构符合Unix系统的规范.MAC机器主板使用了Intel主导的EFI标准,硬盘分区格式采用GP ...
- Ruby on Rails Tutorial 第一章 之 Git项目管理
1.安装和设置 (1)git的安装(略) (2)初始化设置 $ git config --global user.name "LihuaSun" $ git config --gl ...