javascript - 基于屏幕调整大小的 vanilla 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();