width(),outerWidth,innerWidth,clientWidth,clientX, screenX的区别

Article reprinted from  https://segmentfault.com/a/1190000010746091

$(window).width()与$(window).height()

$(window).width()And $(window).height(): width and height of the screen is obtained visible region, and does not include a scrollbar tool bar.

$(window).width() = width + padding
$(window).height() = height + padding

document.documentElement.clientWidth与document.documentElement.clientHeight

document.documentElement.clientWidthAnd document.documentElement.clientHeight: get the width and height of the screen is viewable area, not including the scroll bar and toolbar with jquery result of (window) .width () and (window) .height () obtained is the same.

document.documentElement.clientWidth = width + padding
document.documentElement.clientHeight = height + padding

window.innerWidth与window.innerHeight

window.innerWidthAnd window.innerHeight: obtaining highly visible region is wide, but the width of the longitudinal window.innerWidth width includes the scroll bar, height window.innerHeight comprising high horizontal scroll bar (IE8 and lower browsers do not support).

window.innerWidth = width + padding + border + 纵向滚动条宽度
window.innerHeight = height + padding + border + 横向滚动条高度

window.outerWidth与window.outerHeight

window.outerWidthAnd window.outerHeight: is obtained plus toolbars and scroll bars of the window width and height.

window.outerWidth = width + padding + border + 纵向滚动条宽度
window.outerHeight = height + padding + border + 横向滚动条高度 + 工具条高度

document.body.clientWidth与document.body.clientHeight

document.body.clientWidthAnd document.body.clientHeight: width document.body.clientWidth obtained is viewable area, but document.body.clientHeight obtained is highly body content only if the content is 200px, then the height is 200px, if you want to get it through the screen viewing area height to width required style set, as follows:

body {
height: 100%;
overflow: hidden;
}
body, div, p, ul {
margin: 0;
padding: 0;
}

The key is: body's height: 100% document.body.clientHeight affect the value of.
body of margin: 0, padding: 0 document.body.clientWidth of influence.

offsetWidth & offsetHeight

Returns the width and height + padding + border + scroll bar itself

offsetLeft & offsetTop

All HTML elements have offsetLeft and offsetTop property to return the X and Y coordinates of the element

1 with respect to the element targeted descendant elements and other elements (table means), these attributes returned coordinates are relative to the ancestor element
2. General element is relative to the document, the document is returned to the coordinates

offsetParent attribute specifies the parent element of these attributes are relative, if offsetParent is null, these attributes are the coordinates of documents

//用offsetLeft和offsetTop来计算e的位置
function getElementPosition(e){
    var x = 0,y = 0;
    while(e != null) {
        x += e.offsetLeft;
        y += e.offsetTop;
        e = e.offsetParent;
    }
    return {
        x : x,
        y : y
    };
}

scrollWidth & scrollHeight

These two attributes are plus content area padding element, plus any overflow content size.

Therefore, if there is no overflow, and these attributes clientWidth clientHeight are equal.

scrollLeft & scrollTop

Specifies the position of the scroll bar elements

scrollLeft and scrollTop are writable property by setting them to make the contents of the rolling elements.

compatibility

1.window innerWidth and innerHeight attributes outerWidth and outerHeight IE8 and the following attributes are not supported.

2. Test browser IE, Firefox, Google, 360 browser, Safari supports document.documentElement.clientWidth and document.documentElement.clientHeight.

supplement:

The actual width and height of 1.document.body.clientWidth & .document.body.clientHeight body

2.window.screenX, the distance from the top left corner of the browser window.screenY the upper left corner of the screen

3 event.clientX, event.clientY event trigger point distance from the top left corner of the browser viewing area

4.event.screenX, event.sreenY event trigger point distance from the left corner of the screen

5.event.pageX, event.pageY event trigger point from the position left corner of the page (equivalent to event.clientX + document.body.srollLeft, event.clientY + document.scrollTop)