Summary of offset, client, and scroll attributes in javascript _ javascript skills

This article mainly introduces the summary of the attributes of offset, client, and scroll in javascript. For more information, see the following HTML elements: attributes starting with offset, client, and scroll, it's always confusing. In the book, you can write it down and share it with your friends. It mainly includes the following attributes:

First Group: offsetWidth, offsetHeight, offsetLeft, offsetTop, offsetParent

Group 2: clientWidth, clientHeight, clientLeft, clientTop

Group 3: scrollWidth, scrollHeight, scrollLeft, scrollTop

The detailed definition is as follows:

1.1 The offsetWidth and offsetHeight of an HTML element return its screen size in CSS pixels, including the border and inner margin of the element, excluding the outer margin.

1.2 The offsetLeft and offsetTop attributes return the X and Y coordinates of the elements. Generally, their return values are the coordinates of the document. However, for the child element of the located element and some other elements (such as table cells), the coordinates returned by these attributes are relative to the ancestor element rather than the document.

1.3 The offsetParent attribute specifies the parent element relative to offsetLeft and offsetTop. If offsetParent is null, the return value of the latter two is the coordinate of the document. Therefore, in general, a loop is required to calculate the position of element e using offsetLeft and offsetTop:

// Calculate the coordinate 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 };}

The position calculated by this method is not always correct. we recommend that you use the built-in getBoundingClientRect () method.

2.1 clientWidth and clientHeight are similar to offsetWidth and offsetHeight attributes. The difference is that they do not contain the border size, but only contain content and padding. If a scroll bar is added between the browser's internal margin and border, the return values of clientWidth and clientHeight do not include the scroll bar. Note that for the type,With these inline elements, clientWidth and clientHeight always return 0.

2.2 clientLeft and clientTop return the horizontal and vertical distances between the outer margin of the inner margin of the element and the outer edge of its border. these values are usually equal to the width of the border on the left and top. However, if the element has a scroll bar and the browser rotates the scroll bar on the left or top, they also contain the width of the scroll bar. For inline elements, they are always 0. Usually, clientLeft and clientTop are of little use.

3.1 scrollWidth and scollHeight are the content areas of the element plus its padding plus the size of any overflow content. When the content exactly matches the content area without overflow, these attributes are equal to clientWidth and clientHeight. However, when overflow occurs, they contain overflow content. The Returned values are larger than clientWidth and clientHeight.

3.2 scrollLeft and scrollTop specify the position of the element's scroll bar. Note: scrollLeft and scrollTop are writable. you can set them to scroll the content in the element (the HTML element does not have the scrollTo () method similar to the Window object ).

Obj. offset [WidthHeightTopLeft] obtains the position of the control relative to the parent control.
Event. offset [XY] takes the coordinates of the mouse in the control that triggers the event
Event. screen [XY] relative to screen coordinates
Event. client [XY]
Obj. scroll [WidthHeightTopLeft]
Obj. client [WidthHeightTopLeft] obtains the size of the visible area of the object.

 Untitled Document
Position of the offset control relative to the parent form
Script function offset (ids) {ids. innerHTML = "offsetLeft =" + ids. offsetLeft +"
"; Ids. innerHTML + =" offsetWidth = "+ ids. offsetWidth +"
"; Ids. innerHTML + =" offsetHeight = "+ ids. offsetHeight +"
"; Ids. innerHTML + =" offsetTop = "+ ids. offsetTop +"
"; Ids. innerHTML + =" event. offset Cursor position relative to control
"; Ids. innerHTML + =" offsetX = "+ event. offsetX +"
"; Ids. innerHTML + =" offsetY = "+ event. offsetY +"
";} Function screen (ids) {ids. innerHTML =" scrollWidth = "+ ids. scrollWidth +"
"; Ids. innerHTML + =" scrollHeight = "+ ids. scrollHeight +"
"; Ids. innerHTML + =" scrollTop = "+ ids. scrollTop +"
"; Ids. innerHTML + =" scrollLeft = "+ ids. scrollLeft +"
";} Function client (ids) {ids. innerHTML =" clientWidth = "+ ids. clientWidth +"
"; Ids. innerHTML + =" clientHeight = "+ ids. clientHeight +"
"; Ids. innerHTML + =" clientTop = "+ ids. clientTop +"
"; Ids. innerHTML + =" clientLeft = "+ ids. clientLeft +"
";} Function eventc (ids) {ids. innerHTML =" relative to screen coordinates
Event. screenX = "+ event. screenX +"
"; Ids. innerHTML + =" event. screenY = "+ event. screenY +"
"; Ids. innerHTML + =" relative to the webpage coordinate event. clientX = "+ event. clientX +"
"; Ids. innerHTML + =" event. clientY = "+ event. clientY +"
";} Script

Each browser has these attributes, and some values may be different.


Write your own code and compare the results to understand.