将元素上的“显示：无”还原为原始值

Question

解释

如果用户没有查看/使用元素的权限，则我有一个隐藏元素的脚本。我为这些元素设置了display: none。

现在，当我想再次显示元素时，我不只是想要设置display: block之类的东西，因为元素原本的display值可能不是{{1} }。有什么方法可以还原显示或将其设置为中性值？

示例

例如block如果<div class="fancy-class">...</div>将fancy-class设置为display，而我只是使用脚本将其设置为inline-block，则会破坏用户界面。

尝试

我尝试使用block，但这会将其重置为HTML元素的初始样式-而不是类的样式。 我希望我不必将原始值保留在数组中，然后再次应用它们。看起来不太好。

Answer 1

使用：element.style.display = ""重设元素的style.display

(() => {
  const displayState = reset => 
    Array.from(document.querySelectorAll("div"))
      .forEach( el => el.style.display = reset ? "" : "none" );
    //                                           ^ restore original display state
  document.querySelector("#showAll").addEventListener("click", () => displayState(true));
  document.querySelector("#hideAll").addEventListener("click", () => displayState());
})();

#first, #second, #third {
  display: inline-block;
  margin-right: 1em;
}

<div id="first">[First]</div>
<div id="second">[Second]</div>
<div id="third">[Third]</div>
<button id="showAll">show divs</button>
<button id="hideAll">hide divs</button>

Answer 2

在将显示设置为无之前，您可以保存并重新应用。

var display = document.getElementsByClassName("fancy-class").style.display;
document.getElementById("fancy-class").style.display = none;

设置以上已保存的属性。

document.getElementById("fancy-class").style.display = display;