Javascript 列大小调整仅在页面刷新时有效

Question

嗨 — 我继承了一个网站，该网站有一个无法正常工作的 javascript 脚本。我没有自己编码，是一个javascript n00b，所以请原谅我的无知。

根据窗口大小，站点从 3 列视图切换到 1 列视图，并且有一个脚本可以使站点的一个特定部分在两个视图之间整齐地转换(通过设置列高度使它们整齐堆叠(。我注意到，如果我在不刷新的情况下调整窗口大小，列高将无法调整。我该如何解决这个问题？

谢谢！

<script type="text/javascript">
function adjust_col_heights() {
if (window.innerWidth > 991) {
var col_1_height = document.getElementById('col-1').clientHeight;
var col_2_height = document.getElementById('col-2').clientHeight;
var col_3_height = document.getElementById('col-3').clientHeight;
console.log("adjusting heights from:", col_1_height, col_2_height, col_3_height);
var col_max_height = Math.max(Math.max(col_1_height, col_2_height), col_3_height);
var css_height = col_max_height + "px";
document.getElementById('col-1').style.height = css_height;
document.getElementById('col-2').style.height = css_height;
document.getElementById('col-3').style.height = css_height;
document.getElementById('poem').style.position = "absolute";
}
else {          
document.getElementById('poem').style.position = "relative";
}
}
adjust_col_heights();
window.onresize = adjust_col_heights;
</script>

Answer 1

window.onload = function () {
resizeElements();
window.addEventListener('resize', resizeElements);
}
function resizeElements() { ... }