Question

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

这是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或更窄。我认为逻辑将类似于：“如果窗口宽度＆lt; = 984px AND display = block，则更改为display = none”，但我不确定如何在JS中规定两个“ifs”。

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

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

第二个问题：有没有办法在JS中说“当屏幕大小调整为＆gt; 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
    }
}

关于您可以learn on MDN的条件和操作员。

Fiddle

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

现在，要检查窗口是否已调整为允许的限制，您可以使用事件监听器来window的{{1}}事件。

resize

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 this this”，而||表示“This or this”。

关于你的第二个问题，请看一下：Get the size of the screen, current web page and browser window

仅在一定宽度下应用Javascript

3 个答案: