仅在特定宽度以下应用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并且显示=块，则更改为显示= none”，但是我不确定如何在JS中规定两个“ if”。

所以，第一个问题：我如何在JS中同时规定两个条件？

然后，对于超过984px的窗口宽度，我将需要将显示“重置”为内联，因此，如果有人调整了窗口的大小，即使使用JS将其隐藏在较窄的宽度上，也始终会显示搜索表单。

第二个问题：在JS中，“屏幕尺寸调整为大于984px时，设置display = inline”是否有办法说？

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

由于squgeim的回答，对最终结果进行了编辑：

<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来获取屏幕宽度，方法是：

function toggle_visibility(id) {
    var screen_width = window.innerWidth;
    if(screen_width <= 984) {
        // Screen is smaller than (or equal to) 984px
        var e = document.getElementById(id);
        if(e.style.display == 'block') {
            e.style.display = 'none';
        }
        else {
            e.style.display = 'block';
        }
    }
    else {
        // do something if it's larger
    }
}

您可以在MDN上了解有关条件和操作员的信息。

小提琴

Answer 2

您可以使用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';
  }
}

现在，要检查窗口是否已被调整为允许的大小，可以使用事件侦听器来resize window的resize事件。

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

Answer 3

关于第一个问题（多种条件）：

您可以在一个if / else语句中链接条件。 例如：

var a = "Hello";
var b = "World";
var c = "Test";

if(a === b && c === "Test"){
    alert("both conditions are true");
} else {
    alert("One or both of the conditions don't ");
}

因此&&意思是“ This and this” ，而|| 表示“此或此” 。

关于第二个问题，请看这里： 获取屏幕大小，当前网页和浏览器窗口