How to get the width and height of the page with jquery

In front-end development, it is often necessary to obtain the width and height of the page in order to layout or dynamically adjust it according to the size of the page. In jQuery, getting the page width and height can be achieved through the following methods.

1. Use the .width() and .height() methods to obtain the page width and height

jQuery provides a series of size acquisition methods, including .width() and .height() Method for getting the width and height of an element. For the entire document page, we can get the size of the page by getting the width and height of the body element. The sample code is as follows:

var pageWidth = $('body').width();
var pageHeight = $('body').height();
console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);

It should be noted that the obtained page size may not be the final size because the page may be in a dynamic adjustment state. In order to obtain the final page size, you can wrap the above code in the window load event to ensure that the page is fully loaded before obtaining the size. The sample code is as follows:

$(window).load(function(){
    var pageWidth = $('body').width();
    var pageHeight = $('body').height();
    console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);
});

2. Use the $(window) object to obtain the width and height of the page

Another method is to use the $(window) object to obtain the width and height of the page. The $(window) object represents the browser window object, so the current window size can be obtained through this object, which is the size of the page. The sample code is as follows:

var pageWidth = $(window).width();
var pageHeight = $(window).height();
console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);

It should also be noted that the obtained page size may not be the final size, so the above code can also be wrapped in the window loading event to ensure that the page is fully loaded before obtaining the size. The sample code is as follows:

$(window).load(function(){
    var pageWidth = $(window).width();
    var pageHeight = $(window).height();
    console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);
});

3. Use document.documentElement.clientWidth and document.documentElement.clientHeight to get the page width and height

Another way to get the page width and height is to use document.documentElement. clientWidth and document.documentElement.clientHeight properties. These two properties represent the width and height of the document viewport respectively, which is the visible area of ​​the current web page. The code example is as follows:

var pageWidth = document.documentElement.clientWidth;
var pageHeight = document.documentElement.clientHeight;
console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);

It should also be noted that the obtained page size may not be the final size, so the above code can also be wrapped in the window loading event to ensure that the page is fully loaded before obtaining the size. The sample code is as follows:

$(window).load(function(){
    var pageWidth = document.documentElement.clientWidth;
    var pageHeight = document.documentElement.clientHeight;
    console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);
});

Summary:

The effect achieved by the above three methods is to obtain the width and height of the page. Which method to use depends on your specific needs and project realities. However, one thing to note is that the page size obtained may not be the final size, so it is best to wrap the code in the window loading event to ensure that the page is fully loaded before obtaining the size.

The above is the detailed content of How to get the width and height of the page with jquery. For more information, please follow other related articles on the PHP Chinese website!