jQuery 获取屏幕高度的多种方法分享

技术文摘

2025-01-09 21:47:05 小编

在网页开发中，经常需要获取屏幕的高度来实现各种布局和交互效果。jQuery作为一款流行的JavaScript库，提供了多种方法来获取屏幕高度。下面就为大家分享几种常见的方法。

方法一：$(window).height()

这是最常用的方法之一。它返回浏览器窗口的可视区域高度，不包括工具栏和滚动条等。例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
  <p id="height"></p>
  <script>
    $(document).ready(function () {
      var windowHeight = $(window).height();
      $('#height').text('窗口高度：' + windowHeight + 'px');
    });
  </script>
</body>

</html>

方法二：$(document).height()

该方法返回整个文档的高度，包括滚动条隐藏部分。如果页面内容较多，出现滚动条时，此方法获取的高度会大于窗口可视区域高度。示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
  <p id="docHeight"></p>
  <script>
    $(document).ready(function () {
      var docHeight = $(document).height();
      $('#docHeight').text('文档高度：' + docHeight + 'px');
    });
  </script>
</body>

</html>

方法三：screen.height

虽然这不是严格意义上的jQuery方法，但可以通过jQuery结合JavaScript的 screen.height 属性来获取屏幕的总高度，它返回的是设备屏幕的实际高度。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
  <p id="screenHeight"></p>
  <script>
    $(document).ready(function () {
      var screenHeight = screen.height;
      $('#screenHeight').text('屏幕高度：' + screenHeight + 'px');
    });
  </script>
</body>

</html>

以上就是jQuery获取屏幕高度的几种常见方法，开发者可以根据具体需求选择合适的方法来实现相应的功能。

TAGS: jquery方法 jQuery获取屏幕高度屏幕高度获取屏幕高度

万千站长工具

技术文摘

jQuery 获取屏幕高度的多种方法分享

欢迎使用万千站长工具！