js获取屏幕高度|极客笔记

js获取屏幕高度

在前端开发中，有时候我们需要获取用户的屏幕高度来进行一些操作，比如设置元素的高度，实现响应式布局等。而JavaScript提供了获取屏幕高度的方法，本文将详细介绍如何使用JavaScript来获取屏幕的高度。

Window对象的innerHeight属性

在JavaScript中，Window对象表示浏览器中打开的窗口。而Window对象的innerHeight属性可以获取浏览器窗口的视口（viewport）的高度，即浏览器中可见区域的高度，不包括滚动条和其他浏览器边框的高度。

以下是使用Window对象的innerHeight属性获取屏幕高度的示例代码：

const screenHeight = window.innerHeight;
console.log(screenHeight);

在上面的代码中，我们通过window.innerHeight获取了当前浏览器窗口的可视区域的高度，并将其存储在screenHeight变量中。最后通过console.log输出screenHeight的值。

使用实际案例演示

接下来，我们通过一个实际的案例来演示如何使用JavaScript获取屏幕高度。

假设我们有一个页面，需要根据用户的屏幕高度来设置一个全屏背景色块的高度。我们可以通过以下代码实现：

<!DOCTYPE html>
<html>
<head>
    <title>Get Screen Height Example</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .full-screen {
            height: 100vh; /* 使用视窗高度作为高度 */
            background-color: #ccc;
            text-align: center;
            line-height: 100vh;
        }
    </style>
</head>
<body>
    <div class="full-screen">
        Screen Height Example
    </div>

    <script>
        const fullScreenDiv = document.querySelector('.full-screen');
        fullScreenDiv.style.height = window.innerHeight + 'px';
    </script>
</body>
</html>

在上面的示例中，我们通过CSS设置了全屏背景块的高度为100vh，即视窗高度。而在JavaScript代码中，我们获取了屏幕高度，并将其设置为全屏背景块的高度，这样就能保证全屏背景块的高度始终与屏幕高度一致。