One js (4) every day to get the screen, document, scroll bar, height and height

Source: Internet
Author: User

Js and jquery


Webpage visible area width document. body. clientWidth webpage visible area height document. body. clientHeight
Webpage visible area wide compatibility mode @ (1) webpage visible area high compatibility mode @ (2)
Webpage body full text width document. body. scrollWidth webpage body full text height document. body. scrollHeight
The high document. body. scrollTop page to which the webpage is rolled. The left document. body. scrollLeft page to which the webpage is rolled
Window. screenTop left window. screenLeft
Screen Resolution height window. screen. height screen resolution width window. screen. width
Screen available workspace height window. screen. availHeight screen available workspace width window. screen. availWidth
Compatibility mode:

(1). (window. innerWidth )? Window. innerWidth :( document.documentelement&document.doc umentElement. clientWidth )? Document.doc umentElement. clientWidth: document. body. offsetWidth;

(2). (window. innerHeight )? Window. innerHeight :( document.documentelement&document.doc umentElement. clientHeight )? Document.doc umentElement. clientHeight: document. body. offsetHeight;

 


ScrollHeight: gets the scroll height of an object.

ScrollLeft: sets or obtains the distance between the left-side border of the object and the leftmost end of the currently visible content in the window.

ScrollTop: sets or obtains the distance between the top of the object and the top of the visible content in the window.

ScrollWidth: gets the scroll width of an object.

OffsetHeight: gets the height of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute.

OffsetLeft: obtains the left position of the object relative to the layout or the parent coordinate specified by the offsetParent attribute.

OffsetTop: obtains the top position of an object relative to the layout or the parent coordinate specified by the offsetTop attribute.

Event. clientX horizontal coordinate of the Relative document event. clientY vertical coordinate of the Relative document

Event. offsetX horizontal coordinates of the relative container event. offsetY vertical coordinates of the relative container

Document.doc umentElement. scrollTop vertical scroll Value


Event.clientxw.document.doc umentElement. The horizontal coordinate of scrollTop relative to the document + The amount of vertical scrolling

 

 

The differences between IE and FireFox are as follows:

IE6.0, FF1.06 +: IE5.0/5.5:
ClientWidth = width + padding

ClientHeight = height + padding

OffsetWidth = width + padding + border

OffsetHeight = height + padding + border clientWidth = width-border

ClientHeight = height-border

OffsetWidth = width

OffsetHeight = height


(The margin attribute in CSS is independent of clientWidth, offsetWidth, clientHeight, and offsetHeight)

 

 


The following code is used to obtain the length and width of the browser and page in jQuery:

 


$ (Window). height () the height of the visible area of the window in the browser
$ (Document). height () the height of the window document in the browser (does not change with the browser window)
$ (Document. body). height () the height of the document body in the current window in the browser
$ (Document. body). outerHeight (true) in the browser, the total height of the window document body includes border padding margin.
$ (Window). width () the width of the visible area of the window in the browser
$ (Document). width () browser current window document for Image width
$ (Document. body). width () the height of the document body in the current window in the browser
$ (Document. body). outerWidth (true) the height of the window document body in the browser
$ (Document). scrollTop () the height of the page to which the page is rolled
$ (Document). scrollLeft () width of the webpage to be rolled

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.