javascript - Bootstrap：响应式设计 - 当窗口从 980px 调整到 979px 时执行 JS

Question

我正在使用最后一个 Twitter 的 Bootstrap。当我的窗口宽度低于 980px 时，我想执行某个 JS 函数（显示一次工具提示）（如您所知，在这个大小上，Bootstrap 会修改导航栏并隐藏标准菜单项）——窗口从 768 到 979，简称. 我知道

@media (min-width: 768px) and (max-width: 979px) {...}

此选项可用于捕获事件。但是，它可能仅用于更改现有样式，例如

body {background-color:#ccc;}

我需要启动 JS 函数，或者为元素添加或删除特定样式。我试过了：

<script>
  window.onresize = function () {
      if (window.outerWidth == 980) {alert('');}
  };
</script>

但是这个解决方案太慢了，甚至会挂起一个浏览器窗口。那么，当窗口从 GREATER 侧调整为 979px 并执行 JS 函数时，是否有任何解决方案来捕获此事件？

谢谢大家！

score 7 · Accepted Answer

outerWidth是一种方法，所以你错过了()：

if (window.outerWidth() == 980)

无论如何，如果您使用的是 jQuery：

$(window).resize(function() {
  if ($(this).width() < 981) {
    //do something
  }
});

1 回答 1