How to easily get the screen height with jQuery

How to easily get the screen height using jQuery

In the process of web development, sometimes we need to get the height of the current browser window in order to make the corresponding layout Adjust or perform a specific operation. Using jQuery, you can easily implement the function of obtaining the screen height. Specific code examples are described below.

First, introduce the jQuery library into the HTML file. It can be introduced through a CDN link, or you can download a local jQuery file and introduce it into the project. The following is an example of introducing jQuery through a CDN link:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Next, write a function to obtain the screen height in JavaScript code. The specific code is as follows:

$(document).ready(function() {
    // 获取屏幕高度
    var screenHeight = $(window).height();
    
    // 输出屏幕高度
    console.log("屏幕高度：" + screenHeight);
});

In the above code, we first obtain the height of the current browser window through the $(window).height() method and assign it to the variablescreenHeight. Then the height of the screen is output through the console.log() method.

If you want to obtain and display the screen height immediately after the page is loaded, you can place the above code in the $(document).ready() function. This ensures that the operation of obtaining the screen height is performed after the DOM is loaded.

When the size of the browser window changes, you can also instantly obtain the latest screen height by listening to the resize event:

$(window).resize(function() {
    var screenHeight = $(window).height();
    console.log("窗口高度已更新为：" + screenHeight);
});

Through the above code example, we can Easily get the screen height using jQuery and update it in real time when needed. This method is simple and easy to use and suitable for various web development scenarios.

The above is the detailed content of How to easily get the screen height with jQuery. For more information, please follow other related articles on the PHP Chinese website!