使用JavaScript切换DOM元素显示状态的七种方法

核心提示：通过JavaScript切换一个元素的显示状态的方法实际上是不可计数的，但在这其中确实有一些非常实用的技巧，使用JavaScript切换DOM元素显示状态的七种方法，追溯到上个世纪90年代后期，切换元素的状态可能是JavaScript开发书籍最早介绍的技巧之一了，这样就可以同时操作更多的元素，这当然没问题！进一步升级的

通过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';
　　}
};

好吧，我们为什么不在参数的传递上更灵活一些呢，这样就可以同时操作更多的元素，这当然没问题！

进一步升级的分离和显示操作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';
　　　　}
　　}
};

最后，我们终于实现了最初要求的效果了。