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

Question

我试图通过调整窗口大小来执行函数。该功能是根据屏幕大小调整身体的颜色。如果屏幕尺寸小于500px, body应该是"红色"，否则应该是"绿色"。我写了一个函数，但它在调整大小时不起作用。只有刷新浏览器才能正常工作。我想在不刷新的情况下执行函数。下面是代码。提前感谢所有人的帮助。

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

你需要在window resize上添加事件监听器

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