Because of browser compatibility issues, using JavaScript to get these values is a pretty painful process. Fortunately, jquery offers a simple, elegant, and compatible solution.
Get the width and height of the browser and page document
Copy Code code as follows:
Get the height of the browser display area
$ (window). Height ();
Get the width of the browser display area
$ (window). width ();
Get the document height of a page
$ (document.body). Height ();
Get the document width of a page
$ (document.body). width ();
Get the scroll bar position
Copy Code code as follows:
Gets the vertical height of the scroll bar to the top
$ (document). ScrollTop ();
Gets the vertical width of the scroll bar to the left
$ (document). ScrollLeft ();
Calculate position and offset
The offset method is a useful way to return the offset information for the first element in the wrapper set. By default, the offset information for the body is relative. The result contains top and left two properties.
Offset (options, results)
Options.relativeto Specifies the ancestor element that calculates the offset position relative to the calculation. This element should be relative or absolute positioned. The omission is relative to the body.
Options.scroll whether scroll bars are counted, default true
Options.padding whether the padding is counted, the default false
Options.margin whether the margin is counted, default true
Options.border whether the border is counted, default true