-1

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

这同样适用于其他样式：如果一个元素具有display: inline-block属性而另一个具有display: list-item，则在隐藏和显示之后，使用 javascript 两者都会display: block设置，这将对元素的样式产生影响。

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

我的建议：也许可以使用javascript从css文件中加载值？而如果没有专门设置显示值，我们可以放心地使用display: block来显示元素。这将解决问题。

请不要在这里推荐 jQuery。我正在开发自己的框架，并且自己学习如何去做有额外的价值。

4

2 回答 2

2

该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;
}
于 2013-10-20T05:31:33.437 回答
0

你可以试试这个

var oldDisplay = document.getElementById("ELEMENT_ID").style.display;

function callHide(id) {
   var element= document.getElementById(id);
   element.style.display = "none";
}

function callShow(id) {
   var element= document.getElementById(id);
   if (oldDisplay == "none") {
      element.style.display = "block";
   } else {
      element.style.display = oldDisplay;
   }
}

你的建议：

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

我认为通过读取 .css 文件或解析它或者如果有任何其他可能的解决方案可用，加载样式不会那么容易

我宁愿建议您将display值保存到变量中并在需要显示时使用它，它会消耗更少的代码行，更少的客户端系统内存和进程，它也会减少用户浏览器的负担

于 2013-10-20T05:40:10.540 回答