javascript - 在 Javascript 中隐藏和显示具有各自样式的元素

Question

我想用 display: none 隐藏一个元素使用 javascript 然后再次显示它。但是，如果我隐藏默认值 <li>元素，然后尝试使用 display: block 显示它, 它不再使用以前默认设置的样式 display: list-item属性(property)。

这同样适用于其他样式:如果一个元素具有 display: inline-block属性(property)和另一个有display: list-item ，在使用 javascript 隐藏和显示之后，它们都会有 display: block set，这将对元素的样式产生影响。

如何隐藏和显示元素以便在使用 javascript 显示它们时“记住”它们的显示值？

我的建议:也许可以使用 javascript 从 css 文件加载值？如果没有特别设置显示值，我们可以安全地使用 display: block显示元素。这将解决问题。

请不要在这里推荐 jQuery。我正在开发自己的框架，并且学习如何自己完成它具有额外的值(value)。

Answer 1

display 属性只能有一个值，所以如果您将它设置为 none 然后想将其恢复到以前的值，唯一的方法就是这样做是在某处记住以前的值，以便您可以恢复它。

如果需要，您可以将先验属性存储为对象本身的属性。

function hide(obj) {
    if (obj.style.display != "none") {
        // save original display value
        // if we are not already hidden
        obj.priorDisplay = obj.style.display;
        obj.style.display = "none";
    }
}

function show(obj) {
    var val = "block";
    if (obj.priorDisplay) {
        val = obj.priorDisplay;
    }
    obj.style.display = val;
}