JS gets the distance of the page element from the top of the browser's workspace

Let's start with a few properties: (Only IE and Firefox are measured for the time being, in fact, most of my work is chrome)

The height/width of the page being rolled up (that is, the height of the page content that is hidden after the browser scroll bar scrolls)

(JavaScript) Document.documentElement.scrollTop//firefox

(javascript) document.documentElement.scrollLeft//firefox

(javascript) document.body.scrollTop//ie

(javascript) document.body.scrollLeft//ie

(jqurey) $ (window). scrolltop ()

(jqurey) $ (window). ScrollLeft ()

Height and width of web work area

(JavaScript) document.documentelement.clientheight//IE Firefox

(Jqurey) $ (window). Height ()

The offset value of the element from the top and left of the document

(JavaScript) Dom element object. OffsetTop//ie Firefox

(JavaScript) Dom element object. offsetleft//ie Firefox

(Jqurey) JQ object. Offset (). Top

(Jqurey) JQ object. Offset (). Left

Gets the distance of the page element from the top of the browser's workspace

The distance of the page element from the top of the browser's workspace = element offset from the top of the document-height of the page being rolled up

That

The distance of the page element from the top of the browser's workspace = Dom element object. offsettop-document.documentelement.scrolltop

Example of application : (Personal habits with jqurey, eliminate compatibility troubles)

Use page elements distance from the top/left side of the browser workspace to implement a prompt box to ensure the correct location of the message display at different points in the page, with code

No matter where the input box is, the ToolTip information is always displayed in the correct position, and will not be blocked when the popup box is visible.

Code (the HTML page of the example above, need to refer to jquery-1.8.2.min.js)

  1 <!--<! DOCTYPE html>--> 2 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 3 
JS gets the distance of the page element from the top of the browser's workspace