基于屏幕调整大小的香草 javascript 功能

Question

我正在尝试通过调整 window 的大小来执行一个函数。该功能是根据屏幕大小更改主体的颜色。如果屏幕尺寸小于 500px，body 应该在 'Red'，否则它应该是 'Green'。我写了一个函数，但它在调整大小时不起作用。它仅在刷新浏览器后起作用。我想在不刷新的情况下执行该功能。以下是代码。预先感谢任何人的帮助。

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";
    }
});

基于屏幕调整大小的香草 javascript 功能

vanilla javascript function based on screen resize

javascript

resize

function