javascript - 在移动设备轮换上重新加载 javascript？

Question

我有一个脚本可以计算 div 的高度并将其作为样式返回。但是当您旋转移动设备时，高度会发生变化，所以我需要一种重新加载它的方法。我怎样才能做到这一点？

<script type="text/javascript">
window.onload = function() {
    var height = document.getElementById('id').offsetHeight;
    document.getElementById('id').style.marginTop = height + 'px';
}
</script>

Answer 1

从中创建一个函数并在加载和调整大小时调用它。无需重新加载页面，只需再次调用代码：

<script type="text/javascript">
function calcHeight() {
    var height = document.getElementById('id').offsetHeight;
    document.getElementById('id').style.marginTop = height + 'px';
}

window.onload = calcHeight;
window.resize = calcHeight;

</script>

Answer 2

您可以创建一个函数：

function setHeight() {
   var height = document.getElementById('id').offsetHeight;
   document.getElementById('id').style.marginTop = height + 'px';
}

您可以调用 onload：

window.onload = function() {
   setHeight();
   // Other actions when window is loaded
}

并调整大小：

window.onresize = function(event) {
   setHeight();
   // Other actions when window is resized
}

这应该可以完成这项工作。