How to get the height and width of a web page using JavaScript and jQuery

JavaScript and jQuery are widely used in front-end development. This article will tell you how to obtain the height and width of a web page using JQuery and JavaScript. Friends in need can refer to it. I hope it can help Ai Xue. of you!

javascript

Visible area width of web page: document.body.clientWidth
Height of visible area of ​​web page: document.body.clientHeight
Visible web page Area width: document.body.offsetWidth (including the width of the edge)
Visible area height of the web page: document.body.offsetHeight (including the height of the edge)
Full text width of the web page body: document.body.scrollWidth
Web page Full text height: document.body.scrollHeight
The height of the web page being scrolled: document.body.scrollTop
The left side of the web page being scrolled: document.body.scrollLeft
The top part of the web page body: window.screenTop
Left of the text part of the webpage: window.screenLeft
Height of the screen resolution: window.screen.height
Width of the screen resolution: window.screen.width
Height of the screen available work area: window. screen.availHeight
The width of the available working area of ​​the screen: window.screen.availWidth

jquery

Get the height of the browser display area: (window).height( ); Get the width of the browser display area: (window).height(); Get the width of the browser display area: (window).width();
Get the document height of the page: (document).height() ; Get the document width of the page: (document).height(); Get the document width of the page: (document).width();
Get the vertical height of the scroll bar to the top: (document).scrollTop(); Get The vertical width of the scroll bar to the left: (document).scrollTop(); Get the vertical width of the scroll bar to the left: (document).scrollLeft();
Calculate element position and offset
offset method is a Useful method that returns the offset information of the first element in the packed set. By default, it is the offset information relative to the body. The result contains two attributes, top and left.
offset(options, results)
options.relativeTo　Specifies the ancestor element of the relative calculation offset position. This element should be positioned relative or absolutely. If omitted, it is relative to body.
options.scroll Whether to include the scroll bar, the default is TRUE
options.padding Whether to include the padding, the default is false
options.margin Whether to include the margin, the default is true
options .border Whether to include the border, default true

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