如果（window.innerWidth <x）无法调整大小，则javascript仅运行功能

Question

I want a function to run only if (window.innerWidth < 800).
This should also work if the window gets resized. So, depending on the browser size it needs to toggle between running the function and doing nothing .

The Problem I experienced, is that the function is still running if you resize the window to more than 800. The function only does nothing if you refresh.

How can I constantly check the Browser size and depend the function on it?

The code below is just a very simple demo, the function will be more complex. So it won't be only about changing the color.

window.addEventListener("load", myFunction);
window.addEventListener("resize", myFunction);

function myFunction() {
  if ((window.innerWidth <= 800)) {
    document.body.style.backgroundColor = "pink";
  }
}

Answer 1

The Problem I experienced, is that the function is still running if you resize the window to more than 800. The function only does nothing if you refresh.

The code you've shown only does something (setting a color in that example) if the window is <= 800px wide. But it doesn't un do that something (resetting the color back to its original value) if the window is > 800px wide. It simply does nothing, and the earlier effect remains in place.

If, like your color example, the thing you're doing endures , you need an else :

if (window.innerWidth <= 800) {
    // Set the <= 800 state
} else {
    // Set the > 800 state
}

If what you're doing is related to styling the body element, don't do it directly as in your example. Instead, use a class .

If you don't need to support IE, then:

document.body.classList.toggle("narrow", window.innerWidth <= 800);

That will set narrow for <= 800 and clear it for > 800.

If you need to support IE9+, then sadly you can't use the second argument to toggle , so:

if (window.innerWidth <= 800) {
    document.body.classList.add("narrow")
} else {
    document.body.classList.remove("narrow");
}

If you need to support IE8, you'll need a classList polyfill (or act directly on className ).

Answer 2

There are two possible transitions here:

1. From width > 800 to width < 800
2. From width < 800 to width > 800

Your resize event handler is only checking for the first case. This will handle both cases:

window.addEventListener("load", myFunction);
window.addEventListener("resize", myFunction);

function myFunction() {
  if (window.innerWidth <= 800) {
    document.body.style.backgroundColor = "pink";
  } else {
    document.body.style.backgroundColor = "yellow";
  }
}

Sidenote: this is a very inefficient way of doing this, because you're resetting the backgroundColor even if it's already set to "pink". This is a more efficient solution:

window.addEventListener("load", myFunction);
window.addEventListener("resize", myFunction);

var bodyColor = "white";
function myFunction() {
  var currentColor = window.innerWidth <= 800 ? "pink" : "white";
  if (currentColor !== bodyColor) {
    document.body.style.backgroundColor = currentColor;
    bodyColor = currentColor;
  }
}

Codepen: https://codepen.io/pen?editors=1111