Question

我试图通过更改div的style属性来显示btn的div onclick。但我无法读取该div的显示属性。我在某处读到代码不起作用，因为脚本在div加载之前尝试获取值，因此脚本应该在window.onload之后触发。如何在窗口加载后使脚本工作，但仅在单击按钮时才能使脚本工作？

<!DOCTYPE html>
<html>
<head>
<style type="text/css"> 
#hidden-div{
display: none;
}
</style>
<script type="text/javascript">
function showMe() {
   var foo = document.getElementById('hidden-div');
   alert(foo.style.display); //this gives a blank alert

   if(foo.style.display == ''){
    foo.style.display = 'block';
   }
   else {
    foo.style.display == 'none';
   } 
}
</script>
</head>
<body>
  <input type="button" id="btn-me" onclick="showMe()">+ clicking here should display the checkboxes</input><br>

  <div id="hidden-div">

  <input type="checkbox" id="check-1"> Check 1</input>
  <br>
  <input type="checkbox" id="check-2"> Check 2</input>
  <br>
  <input type="checkbox" id="check-3"> Check 3</input>

  </div>
</body>
</html>

Answer 1

需要注意的事项：==用于比较，=用于分配。此外，没有关闭输入标签。这是完成的片段：

function showMe() {
   var foo = document.getElementById('hidden-div');

   if(foo.style.display == '' || foo.style.display == 'none'){
        foo.style.display = 'block';
   }
   else {
        foo.style.display = 'none';
   }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="button" id="btn-me" onclick="showMe()">+ clicking here should display the checkboxes</input><br>

  <div id="hidden-div" style="display:none;">

  <input type="checkbox" id="check-1"> Check 1
  <br>
  <input type="checkbox" id="check-2"> Check 2
  <br>
  <input type="checkbox" id="check-3"> Check 3

  </div>
</body>
</html>

我也改变了一些逻辑。如果display为无，并且单击该按钮，则切换可见性。如果display不是none，则将其设为none。

只有样式设置为内联时才能访问element.style.<style>。

Answer 2

foo.style.display仅适用于已内联设置的样式，不适用于样式集或块。为此，您将使用getComputedStyle：

function showMe() {
  var elem = document.getElementById("hidden-div");
  var foo = window.getComputedStyle(elem, null);
  if (foo.getPropertyValue("display") == 'none') {
    elem.style.display = 'block';
  } else {
    elem.style.display = 'none';
  }
}

#hidden-div {
  display: none;
}

<input type="button" id="btn-me" onclick="showMe()">+ clicking here should display the checkboxes
<br>
<div id="hidden-div">
  <input type="checkbox" id="check-1"> Check 1
  <br>
  <input type="checkbox" id="check-2"> Check 2
  <br>
  <input type="checkbox" id="check-3"> Check 3
</div>

使用Javascript更改div的显示样式属性

2 个答案: