正文

轻松掌握：JavaScript如何获取当前屏幕高度及实际应用案例

/0 浏览量
0830

在开发网页应用时，了解如何获取屏幕的尺寸信息对于布局和响应式设计至关重要。JavaScript 提供了多种方法来获取屏幕的高度，这些方法可以帮助开发者根据不同的需求来调整网页内容。以下是获取当前屏幕高度的方法及其实际应用案例。

获取屏幕高度的几种方法

1. window.innerHeight

window.innerHeight 属性返回当前视口的高度，不包括工具栏和滚动条等UI元素。

var screenHeight = window.innerHeight;
console.log("视口高度: " + screenHeight + "px");

2. document.documentElement.clientHeight

document.documentElement.clientHeight 返回当前文档元素的高度，不包括滚动条、工具栏等UI元素。

var documentHeight = document.documentElement.clientHeight;
console.log("文档元素高度: " + documentHeight + "px");

3. document.body.clientHeight

document.body.clientHeight 返回当前文档体的实际高度，包括滚动条、工具栏等UI元素。

var bodyHeight = document.body.clientHeight;
console.log("文档体高度: " + bodyHeight + "px");

4. screen.height

screen.height 返回整个屏幕的高度，包括任务栏、工具栏等UI元素。

var screenHeight = screen.height;
console.log("屏幕高度: " + screenHeight + "px");

实际应用案例

1. 创建全屏背景

使用 window.innerHeight 可以让背景图片或视频自适应屏幕高度，从而创建全屏背景效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全屏背景</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
  }
  .bg-video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto;
    z-index: -100;
    background: url('background.jpg') no-repeat;
    background-size: cover;
  }
</style>
</head>
<body>
<div class="bg-video"></div>
<script>
  var screenHeight = window.innerHeight;
  document.querySelector('.bg-video').style.height = screenHeight + 'px';
</script>
</body>
</html>

2. 动态调整内容高度

在响应式设计中，你可能需要根据屏幕高度动态调整某些元素的高度，以便它们始终在屏幕上可见。

function adjustContentHeight() {
  var contentHeight = window.innerHeight - 100; // 减去底部固定元素的高度
  document.getElementById('content').style.height = contentHeight + 'px';
}

window.addEventListener('resize', adjustContentHeight);
adjustContentHeight();

3. 创建滚动条

如果你想创建一个滚动条，可以结合使用 window.innerHeight 和 document.documentElement.scrollHeight 来判断内容是否需要滚动。

function createScrollbar() {
  var contentHeight = document.documentElement.scrollHeight;
  var viewportHeight = window.innerHeight;
  if (contentHeight > viewportHeight) {
    // 创建滚动条
    document.body.style.overflowY = 'scroll';
  }
}

window.addEventListener('resize', createScrollbar);
createScrollbar();

通过以上方法，你可以轻松地获取屏幕高度并在实际应用中使用它。这些技巧不仅可以帮助你优化网页布局，还可以提升用户体验。

-- 展开阅读全文 --