如何根据屏幕的像素宽度使JavaScript函数“超限”？

Question

我已经看到了很多有关如何在屏幕宽度超过定义的最大值或最小值时立即触发功能的内容，但是出于我的目的，我不希望该功能立即发生。 这是来自W3学校的JS函数的片段作为示例。

function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

可以说，如果我的屏幕宽度为500或更小，并且屏幕宽度为501或更大，则我只想“访问”此功能。 在我的情况下，将不会有其他功能，因为当它超过指定宽度时，默认情况下它将执行其他操作。 我需要执行的JavaScript函数是一个onClick事件，该事件仅在屏幕小于指定宽度时才可以发生。

Answer 1

您可以简单地将函数的内容包装在if ，以对照所需的值（例如500 ）检查页面视口的宽度，或者只是立即return该函数，这样可以节省几个花括号。

function myFunction() {
  if (window.innerWidth > 500) return;
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

如果您要确保其他开发人员未正确使用该功能，则可以抛出一个错误，例如，

if (window.innerWidth > 500) throw new Error("This function should not be called on viewports smaller than 500px width!");

Answer 2

我在这里坚持使用@media规则，而不是直接设置style.display ，而是添加/删除类。

JS：

function myFunction() {
  document.getElementById("myLinks").classList.toggle("mobile_hidden");
}

CSS：

@media screen and (max-width: 500px) {
  .mobile_hidden {
    display: none;
  }
}

这样做的另一个好处是，如果窗口具有类，则调整窗口大小将自动隐藏该元素。