使用jquery获取窗口高度

Getting window height with jquery

本文关键字：高度 窗口 获取 jquery 使用      更新时间：2023-09-26

基本上，我想要一个名为#content的div，如果浏览器的高度小于440px，它的css top值为200px。然而，这似乎不起作用。我做错了什么?

var boh = $(window).height();
var bohi = parseInt(boh);
if(bohi < 440) {
    $("#content").css("top","200px");
} else {
    //this part works, so it's hidden
}

我认为你需要处理$(window).resize()事件，否则逻辑只会运行一次。

<script type="text/javascript">
$(window).resize(function(){
  var bohi = $(window).height();
  if(bohi < 440) {
      $("#content").css("top","200px");
  } else {
      //this part works, so it's hidden
  }    
});
</script>

这是一个似乎正在工作的jsfiddle:

  • http://jsfiddle.net/kNbuy/

注意$(window).height()不需要parseInt()，它已经作为一个数字处理了。

您需要将此代码放入文档就绪处理程序中，如下所示:

<script>
$(document).ready(function(){
var boh = $(window).height();
var bohi = parseInt(boh);
if(bohi < 440) {
    $("#content").css("top","200px");
} else {
    //this part works, so it's hidden
}
});
</script>

OK。我想我知道你的问题在哪里了。

您没有指定#content元素的'position'属性是什么。如果你没有得到你想要的行为，我建议你尝试添加position:absolute的样式#content。

我建议你仔细研究'position'属性是如何工作的。您可能会对更改#content 和父元素的位置css属性得到的结果感到惊讶。

另外，您可能需要考虑让页面在用户调整浏览器窗口大小时自动执行一些代码来调整自己。这可以通过$.resize()来处理。

从2015年开始，我建议使用CSS媒体查询来代替JavaScript。

@media (max-height: 440px) {
    #content {
        top: 200px;
    }
}
相关文章：