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

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

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

2 个答案: