Как сделать функцию JavaScript «запрещенной» на основе ширины экрана в пикселях?

Question

Я видел много материала о том, как запускать функцию прямо, когда ширина экрана превышает заданное максимальное или минимальное значение, но для моей цели я не хочу, чтобы функция происходила немедленно.Вот пример функции JS из школ W3 в качестве примера.

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

Дополнительным преимуществом этого является то, что изменение размера окна автоматически скрывает элемент, если у него есть класс.