javascript - 仅在特定宽度以下应用 Javascript

Question

我有一个搜索表单，我使用一些简单的 JS 来在单击按钮时切换其显示。

这是 HTML:

<div id="form-search">
  <form action="/search" method="post" role="search">
    <label for="searchbox">Search</label>
    <input value="" name="searchquery" id="searchbox" placeholder="Search Site" type="text">
    <button aria-label="Submit Search" type="submit" tabindex="-1">
      <img src="/i/misc/searchbutton.gif" alt="Submit Search">
    </button>
  </form>
</div>

<a href="#" onclick="toggle_visibility('form-search');"><img src="search-toggle.gif" /></a>

还有 JS:

<script>
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
  e.style.display = 'none';
else
  e.style.display = 'block';
}
//-->
</script>

注意:我从 https://css-tricks.com/snippets/javascript/showhide-element/ 获取了 JS .

我想做的是仅让这个脚本在984px或更窄的窗口宽度上工作。我认为逻辑会是这样的:“如果窗口宽度<= 984px AND display = block，则更改为display = none”，但我不确定如何在JS中规定两个“if”。

那么，第一个问题:如何在 JS 中规定两个 if 条件？

然后，我需要将窗口宽度超过 984px 的显示“重置”为内联，因此，如果有人调整窗口大小，搜索表单将始终显示，即使他们使用 JS 以更窄的宽度隐藏它。

第二个问题:有没有办法在JS中说“当屏幕大小调整到>984px时，设置display = inline”？

非常感谢您的建议!我是 JS 新手。 :)

编辑了我最终得到的内容，感谢 sqgeim 的回答:

<script>
<!--
var WIDTH_LIMIT = 984;
function toggle_visibility(id) {
  var e = document.getElementById(id);

  var windowWidth = window.innerWidth;

  if(e.style.display == 'block' && windowWidth <= WIDTH_LIMIT) {
    e.style.display = 'none';
  } else {
    e.style.display = 'block';
  }
}

window.addEventListener('resize', function (e) {
  var currentWidth = window.innerWidth;
  var e = document.getElementById('form-search');
  if (currentWidth > WIDTH_LIMIT) {
    e.style.display = 'inline'
  } else {
      e.style.display = 'none';
  }

});
//-->
</script>

Answer 1

您可以使用window.innerWidth来找出窗口的当前宽度。

所以你的函数将是这样的:

var WIDTH_LIMIT = 984;
function toggle_visibility(id) {
  var e = document.getElementById(id);

  var windowWidth = window.innerWidth;

  if(e.style.display == 'block' && windowWidth <= WIDTH_LIMIT) {
    e.style.display = 'none';
  } else {
    e.style.display = 'block';
  }
}

现在，要检查窗口大小是否已调整到允许的限制，您可以使用 window 的 resize 事件的事件监听器。

window.addEventListener('resize', function (e) {
  var currentWidth = window.innerWidth;
  if (currentWidth >= WIDTH_LIMIT) {
    // do something
  }
});