Javascript if 函数显示和隐藏元素 : In depth analysis of why if works in some cases and not others

Question

该代码的目的是在单击标题元素时隐藏/显示元素。为什么代码有效和无效尚不清楚。

示例 1

function showHideAnswers (id) {
    var x = document.getElementById(id);
    if (x.style.display === "") {
        x.style.display = "block";
    } 
}

上面的代码有效。注意比较“”而不是无的显示。

示例 2

function showHideAnswers(id) {
   var x = document.getElementById(id);
   if (x.style.display === "none") {                                                            
       x.style.display = 'block';
   } 
}

此代码无效。注意显示与“无”相比，我认为这是导致它失败的部分；但是，“none”在示例 3 中有效。

示例 3

function showHideAnswers(id) {
    var x = document.getElementById(id);
    if (x.style.display === "none") {
       x.style.display = 'block';
    } else {
       x.style.display = 'none';
    }
}

此代码有效，这让我对示例 2 为何无效感到困惑。

Answer 1

element.style 将仅返回存在内联样式的值，否则将返回 ""

使用Window.getComputedStyle相反!

function showHideAnswers(id) {
  var x = document.getElementById(id);
  var style = window.getComputedStyle(x, null);
  if (style.display === "none") {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}

<div id='elem'>Element</div>
<button onclick="showHideAnswers('elem')">Click me!</button>