Question

以下是您想要隐藏/显示元素时可以在任何地方找到的JavaScript代码：

function sh(_id, _val) {
    if (document.getElementById) { 
        document.getElementById(_id).style.display = _val;
    }
    else {
        if (document.layers) { 
            document._id.display = _val;
        }
        else { 
            document.all._id.style.display = _val;
        }
    }
}
function hide(_id) {
    sh(_id, 'none');
}
function show(_id) {
    sh(_id, 'block');
}

问题是“显示”功能：它强制为“ block ”。如果我使用包含tr和td的表格，当我想要显示它们时，我不会将它们显示为“ block “但恢复到初始状态。

我该怎么办？

你会怎么做？

Answer 1

如果要恢复其默认 display值，可以为其指定一个空字符串：

element.style.display = '';

如果你想要通过CSS分配的那个，你必须将它存储在某个地方，例如在id -> display地图或data-属性中。

Answer 2

最简单的方法是使用jQuery和.show（）http://api.jquery.com/show/

第二种最简单的方法是将表格包装在div中。

如果不是，我会尝试将显示的初始值存储在某处（如果html5为“data-”属性），如果不存在于其他隐藏元素中

Answer 3

如果您的练习要点是了解更多有关DOM的信息，那么您可以忽略这个答案。但如果重点是让一些UI工作，那么：

我的建议是使用jquery。如果你这样做了，你展示的所有代码都会完全消失，你会隐藏/显示这样的元素：

$('#' + id).hide()
$('#' + id).show()

如果你想坚持使用低级DOM api，那么你必须保存style.display的先前值（块或其他），以便稍后恢复。你可以做到这一点。但是你会不得不编写这样的代码，考虑到所有类型的情况，当有人已经编写了这样的代码时，他们就会免费赠送它。

Answer 4

var previousDisplay = {};
function sh(_id, _val) {
    if (document.getElementById) { 
        document.getElementById(_id).style.display = _val;
    }
    else {

        if (document.layers) { 
if(!previousDisplay[_id]){
          previousDisplay[_id] = document._id.display;
        }
            document._id.display = _val;
        }
        else { 
if(!previousDisplay[_id]){
          previousDisplay[_id] = document.all._id.style.display;
        }
            document.all._id.style.display = _val;
        }
    }
}
function hide(_id) {
    sh(_id, 'none');
}
function show(_id) {
    var style = previousDisplay[_id];
    if(!style){
     style = 'block';
    }
    sh(_id, style );
}

如何隐藏然后恢复到初始状态（=并不总是“阻止”）？

4 个答案: