Position and the various measurement methods

Page location attribute

pageX,pageY

Mouse position on the page, start from the top left page to the page as a reference point, with the movement of the scroll bar is not changed;

FF-specific, IE no. pageY = clientY + scrollTop-clientTop;

clientTop = height for their own border, border - Top

clientX, clientY

Mouse visual location on the page area, such as: if the browser shrink, so that the Y-axis scroll bar appears, clientY value may become small; but pageY did not change.

screenX,screenY

Position the mouse on the computer screen, measured from the top left corner of the screen.

offsetX,offsetY

IE-specific, mouse position relative to the trigger event elements to the elements box model of 内容区域the upper left corner as the reference point, if there is border, may be negative.

layerX，layerY

FF ,, unique compared to the position of the current mouse coordinates, i.e., if the trigger element is not positioned relative or absolute positioning is provided to the page as a reference point, and if so, changing the reference coordinate system, from the border region of the trigger element box model the upper left corner as the reference point
after that is when the trigger element is set relative or absolute positioning, layerX and offsetX to live happily together ^ - ^, almost equal, the only difference is from a border as a reference point, a reference point to content .

FF from the borderbeginning,

x, y

Position the mouse on the computer screen;

x / y: IE-specific, and this role would have layerX / layerY essentially the same, but the current coordinates of the selected IE is very confusing, can not to do, do not discuss

Others online summary of the table on six tangle tangled ..

1. offsetX/offsetY：W3C- IE+ Firefox- Opera+ Safari+ chrome+
2. x/y：W3C- IE+ Firefox- Opera+ Safari+ chrome+
3. layerX/layerY：W3C- IE- Firefox+ Opera- Safari+ chrome+
4. pageX/pageY：W3C- IE- Firefox+ Opera+ Safari+ chrome+
5. clientX/clientY：W3C+ IE+ Firefox+ Opera+ Safari+ chrome+
6. screenX/screenY：W3C+ IE+ Firefox+ Opera+ Safari+ chrome+

Only clientX and screenX happy is a W3C standard. The other, all tangled up.
To force is, chrome and safari train pass to kill! Fully support all the properties of which (offsetX and layerX are based border as a reference point)

scrollTop

**Element.scrollTop** Property can get or set the contents of a rolling element of vertical pixels.

An element scrollTopvalue of the element to the top of the viewport visible measure of the distance (the top of) the content. When the content of a scroll bar elements are not produced in the vertical direction, then itscrollTop 值为0。

Element.scrollHeight Read-only

Return type: Numberindicates scroll view height of the element.

Element.scrollLeft

Return type: Numberrepresents the leftmost lateral rolling element distance displacement bar.

Element.scrollLeftMax Read-only

Return type: Numberrepresents the maximum value of the horizontal scroll bar element movable

Element.scrollTop

Return type is: Number, the rolling distance of the longitudinal strip element

Element.scrollTopMax Read-only

Return type: Numberrepresents the maximum value of the vertical scroll bar element movable

Element.scrollWidth Read-only

Return type is: Number, the view showing the rolling element's width.

clientTop

A top border element width (in pixels). Excluding the top margins or padding. clientTopIt is read-only.

A border element width, i.e. the width of the upper boundary of the border element;

Similarly: the width of a border element oDiv.clientLeft left border;

Element.clientHeight Read-only

Returns Numbershows the internal height relative to the outer element.

Element.clientLeft Read-only

Returns Numberdenotes the width of the element from its left boundary.

Element.clientTop Read-only

Return Numbermeans that the element from which the height of the boundary.

Element.clientWidth Read-only

Returns Numberdenotes the width of the element within it.

innerHeight 和 innerWidth

　       // content
        $('.demo1').width()
        
        // content+padding
        $('.demo1').innerWidth();//200+100*2
        
        // content+padding+border
        $('.demo1').outerWidth();//200+100*2+5*2
        
        // content+padding+border+margin
        $('.demo1').outerWidth(true);//200+100*2+5*2+5*2
        
        height,innerHeight(),outerHeight(),outerHeight(true)同理。

API Reference URL: https://developer.mozilla.org/zh-CN/docs/Web/API/Element