Question

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

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

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

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

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

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;
}

Answer 2

你可以试试这个，

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;
   }
}

您的建议：

我的建议：也许可以从css加载值使用javascript文件？如果显示值不是具体的设置，我们可以安全地使用display：block来显示元素。这个会解决问题。

我认为通过读取.css文件或解析它或者是否有任何其他可能的解决方案来加载样式并不容易

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

在Javascript中隐藏和显示各自样式的元素

2 个答案: