想要天天向上,就要懂得享受学习。图老师为大家推荐使用JavaScript切换DOM元素显示状态的七种方法,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!
【 tulaoshi.com - Web开发 】
通过JavaScript切换一个元素的显示状态的方法实际上是不可计数的,但在这其中确实有一些非常实用的技巧。追溯到上个世纪90年代后期,切换元素的状态可能是JavaScript开发书籍最早介绍的技巧之一了。实际上就算在现在,如果能够合理地控制元素的显示和隐藏,同样可以大幅度提高用户的体验。
不管怎样,这里介绍实现这种效果的七种方式。
正文开始
第一种,可能是最简单的,也是大家最常用的方式。
最直接的切换方式
// 显示document.getElementById('element').style.display = '';// 隐藏document.getElementById('element').style.display = 'none';
我们把上面的操作包装到函数中,这样使用起来更加快速,比如下面这段代码:
显示还是隐藏?
function toggle(obj) { var el = document.getElementById(obj); if ( el.style.display != 'none' ) { el.style.display = 'none'; } else { el.style.display = ''; }}
这种方式很容易就实现了,但我们可以改进一下,使用三元条件运算符简化代码。
三元风格的切换
function toggle(obj) { var el = document.getElementById(obj); el.style.display = (el.style.display != 'none' ? 'none' : '' );}
你听过$函数么?如果其他函数没有使用这个名称,我们可以借用一下!
使用$赋予三元风格更多内涵
// 我们的美元函数function $() { var elements = new Array(); for (var i = 0; i arguments.length; i++) { var element = arguments[i]; if (typeof element == 'string') element = document.getElementById(element); if (arguments.length == 1) return element; elements.push(element); } return elements;}// 切换函数的升级版function toggle(obj) { var el = $(obj); el.style.display = (el.style.display != 'none' ? 'none' : '' );}
好吧,现在这项工作已经变得很简洁了,但我们可以做的更漂亮么?为什么不呢。我们现在还有个限制,就是只能切换一个对象的状态,让我们突破这个限制。
同时切换多个对象
function toggle() { for ( var i=0; i arguments.length; i++ ) { $(arguments[i]).style.display = ($(arguments[i]).style.display != 'none' ? 'none' : '' ); }}
非常好,现在这段代码看起来已经非常养眼了(个人认为这段是最棒的)。让我们在尝试一下,能不能显式的设置每个对象是显示还是隐藏。
分离显示和隐藏操作
var toggle = { show : function(obj) { document.getElementById(obj).style.display = ''; }, hide : function(obj) { document.getElementById(obj).style.display = 'none'; }};
好吧,问题来了,刚才定义的$函数怎么办呢,我们要把两种方式结合起来。
经过整合的显示和隐藏操作
var toggle = { show : function(obj) { $(obj).style.display = ''; }, hide : function(obj) { $(obj).style.display = 'none'; }};
好吧,我们为什么不在参数的传递上更灵活一些呢,这样就可以同时操作更多的元素,这当然没问题!
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)进一步升级的分离和显示操作
var toggle = { show : function() { for ( i=0; i arguments.length; i++ ) { $(arguments[i]).style.display = ''; } }, hide : function() { for ( i=0; i arguments.length; i++ ) { $(arguments[i]).style.display = 'none'; } }};
最后,我们终于实现了最初要求的效果了。
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)来源:http://www.tulaoshi.com/n/20160219/1612861.html
看过《使用JavaScript切换DOM元素显示状态的七种方法》的人还看了以下文章 更多>>