如何用

JavaScript 切换 DOM 元素显示状态

显示

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' : '' );
}
你听过

$函数么？如果其他函数没有使用这个名称，我们可以借用一下！

我们的美元函数

(和 jQuery 等框架里的$()基本相同)

function $() { 
    var elements = new Array(); //用 elements 来得到所有参数
    for (var i = 0; i < arguments.length; i++) {
        var element = arguments[i];
        if (typeof element == 'string'){//可以使用 constructor 来判断
            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' : '' );
    }