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

最新推荐文章于 2024-12-01 07:58:06 发布

转载最新推荐文章于 2024-12-01 07:58:06 发布 · 677 阅读

文章标签：

#javascript #function #constructor #jquery #string #框架

本文介绍了一种使用JavaScript实现DOM元素显示状态切换的方法，并逐步优化了该功能的实现方式，最终形成了简洁高效的代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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' : '' );
    }
}
非常好，现在这段代码看起来已经非常养眼了（个人认为这段是最棒的）。
让我们在尝试一下，能不能显式的设置每个对象是显示还是隐藏。

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';
        }
    }
};
最后，我们终于实现了最初要求的效果了。