javascript - 基于屏幕调整大小的香草javascript函数

Question

我正在尝试通过调整窗口大小来执行功能。该功能是根据屏幕调整大小来改变正文的颜色。如果屏幕尺寸小于 500 像素，主体应为“红色”，否则应为“绿色”。我写了一个函数，但它在调整大小时不起作用。它只有在刷新浏览器后才能工作。我想在不刷新的情况下执行该功能。以下是代码。提前感谢任何人的帮助。

HTML：

<div class="trigger">Trigger</div>
<div class="content">This is the Toggle Displaying content</div>

JavaScript：

doit=()=>{
if(window.innerWidth<500) {
document.body.style.background="red";
}
else {
document.body.style.background="green";
}
}
doit();

Answer 1

尝试以下操作：

doit = () => {
    const fn = () => {
        if(window.innerWidth<500) {
            document.body.style.background="red";
        }
        else {
            document.body.style.background="green";
        }
    }
    fn()
    window.addEventListener('resize', fn)
}
doit();

Answer 2

您需要在窗口调整大小时添加事件侦听器

document.addEventListener("resize", function (e) {
    if(window.innerWidth<500) {
        document.body.style.background="red";
    } else {
        document.body.style.background="green";
    }
});