如何使用当前HTML高度更改（DOM）CSS？

Question

我正在尝试创建一个函数，当我单击按钮时将CSS更改为当前高度。它不会读取当前的高度。

var height = $(window).height();

function openNav() {
  document.getElementById("bodypacity").style.height = height;
}

#bodypacity {
  width: 100%;
  background-color: black;
  opacity: 0.4;
  position: absolute;
  z-index: 999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menunav"> <span id="menu" style="" onclick="openNav()">&#9776;</span>
  <a href="index.html"><img id="logo" src="logo.png"></a>
</ul>

Answer 1

如果我理解正确，你想获得height的window并将元素设置为等于height。你非常接近实现这一点，你需要的是将"px"添加到最终的height，因为$(window).height()只返回数字，所以你可以使用$(window).height() + "px"设置实际高度，在你的情况下它将是document.getElementById("target").style.height = height + "px";：

var height = $(window).height();
function openNav() {
  document.getElementById("target").style.height = height + "px";
}

html,
body {
  margin: 0;
  padding: 0;
}

#target {
  width: 100%;
  height: 50px;
  background-color: royalblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">
  <button onclick="openNav()">Set Height</button>
</div>