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

【问题标题】：vanilla javascript function based on screen resize基于屏幕调整大小的香草javascript函数
【发布时间】：2021-12-04 07:41:42
【问题描述】：

我正在尝试通过调整窗口大小来执行功能。该功能是根据屏幕调整大小来改变正文的颜色。如果屏幕尺寸小于 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();

【问题讨论】：

标签： javascript function resize

【解决方案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();

【讨论】：

``` window.addEventListener('resize', doit) ``` 我试过上面的代码。但是当我打开浏览器时它不工作，但一旦我开始调整窗口大小就可以工作。任何解决方案。
``` window.addEventListener('resize', doit) ``` 我试过上面的代码。但是当我打开浏览器时它不工作，但一旦我开始调整窗口大小就可以工作。任何解决方案。
在事件监听器前添加doit()
嗨，Rateb，您的回答很好。我会标记你的答案是解决方案。但在那之前让我问你，有没有其他解决方案可以让函数本身的所有内容都包含在内。只是问问。
当然，我会编辑答案

【解决方案2】：

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

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

【讨论】：