The most complete way to get the width, height and position of elements

offsetWidth / offsetHeight

offsetWidth

Htmlelement. offsetWidth is a read-only property that returns the layout width of an element. A typical offsetWidth (which may vary from browser to browser) measures the border of the containing element, the padding of the horizontal, the vertical scrollbar (if any), and the width of the CSS setting The value of).

var offsetWidth = element.offsetWidth;
Copy the code

offsetHeight

Htmlelement. offsetHeight is a read-only property that returns the pixel height of the element. The height contains the element’s vertical inner margin and border, and is an integer.

In general, an element’s offsetHeight is a measure of the CSS height of an element, including its border, inner margin, and horizontal scroll bar (if present and rendered), not the height of pseudo-class elements such as :before or :after.

For the body object of the document, it includes a high linear total content of CSS in place of elements. The descending content height of the floating element is ignored.

var offsetHeight = element.offsetHeight;
Copy the code

offsetTop / offsetLeft

Before introducing these two properties, let’s look at the offsetParent property to help you understand.

offsetParent

Htmlelement. offsetParent is a read-only property that returns a pointer to the closest (closest on the including hierarchy) location element that contains the element. If there is no positioned element, offsetParent is the nearest table, table cell, or root element (HTML in standard mode; Body in quirks mode). When element style.display is set to “None”, offsetParent returns NULL.

OffsetParent is useful because offsetTop and offsetLeft are both relative to their inner margin boundaries.

var offsetParent = element.offsetParent;
Copy the code

offsetTop

Htmlelement. offsetTop is a read-only property that returns the distance of the current element relative to the top of its offsetParent element.

var offsetTop = element.offsetTop;
Copy the code

offsetLeft

Htmlelement. offsetLeft is a read-only property that returns the pixel value of the upper-left corner of the current element offset from the left boundary of the htmlElement. offsetParent node.

For block-level elements, offsetTop, offsetLeft, offsetWidth, and offsetHeight describe the element’s bounding box relative to offsetParent.

However, for inline elements that can be truncated to the next line (such as span), offsetTop and offsetLeft describe the position of the first bounding box (use element.getClientrects () to get its width and height), And offsetWidth and offsetHeight describes the dimensions of the bounding box (use Element. GetBoundingClientRect to gain its position). Therefore, a box that uses offsetLeft, offsetTop, offsetWidth, offsetHeight to correspond to left, top, width, and height will not be the box boundary of the text container SPAN.

var offsetLeft = element.offsetLeft;
Copy the code

clientWidth / clientHeight

clientWidth

Element.clientWidth is a read-only property that returns the internal width of the Element, in pixels. This property includes inside margins, but not vertical scroll bars (if any), borders, and margins.

var clientWidth = element.clientWidth;
Copy the code

clientHeight

Element.clientWidth is a read-only property, 0 for elements that do not have CSS or inline layout boxes defined, and it is the height (in pixels) inside the Element, including inner margins but excluding horizontal scroll bars, borders, and margins.

ClientHeight can be calculated using CSS height + CSS padding – horizontal scroller height (if present).

var clientHeight = element.clientHeight;
Copy the code

clientTop / clientLeft

clientTop

Element.clientTop is a read-only property that represents the width (in pixels) of the top border of an Element. Does not include top margins or inside margins.

var clientTop = element.clientTop;
Copy the code

clientLeft

Element.clientLeft is a read-only property that represents the width, in pixels, of an Element’s left border. This property includes the width of the scroll bar if the element’s text orientation is right-to-left (RTL, right-to-left) and a vertical scroll bar appears on the left due to content overflow. ClientLeft does not include left margin and left inner margin.

var clientLeft = element.clientLeft;
Copy the code

innerWidth / innerHeight

innerWidth

Window. innerWidth is a read-only property that represents the width of the browser viewport (in pixels), including a vertical scroll bar if it exists.

var innerWidth = window.innerWidth;
Copy the code

innerHeight

Window. innerHeight is a read-only property that represents the viewport height, in pixels, of the browser window, including a horizontal scroll bar if it exists.

var innerHeight = window.innerHeight;
Copy the code

outerWidth / outerHeight

outerWidth

Window.outerwidth is a read-only property that represents the width of the entire browser Window, including the sidebar (if present), Window borders (Window Chrome), and Window resizing Borders /handles.

var outerWidth = window.outerWidth;
Copy the code

outerHeight

OuterHeight is a read-only property that retrieves the height of the entire browser Window (in: Pixels), including sidebars (if present), window borders (Window Chrome), and window resizing Borders /handles.

var outerHeight = window.outerHeight;
Copy the code

scrollTop / scrollLeft

scrollTop

The element. scrollTop property gets or sets the number of pixels that an Element’s content scrolls vertically.

The scrollTop value of an element is a measure of the distance from the top of the element to its very top visible content. When the content of an element does not produce a vertical scroll bar, its scrollTop value is 0.

ScrollTop can be set to any integer value, and note:

If an element cannot be rolled (for example, it does not overflow, or the element has a “non-scrollable” attribute), scrollTop will be set to 0.
Set the value of scrollTop to less than 0. ScrollTop is set to 0
If a value is set beyond the container’s scrollable value, scrollTop is set to the maximum value

var  scrollTop = element.scrollTop; / / to get
element.scrollTop = intValue; / / set
Copy the code

scrollLeft

The element. scrollLeft property reads or sets the distance from the Element’s scroll bar to the left of the Element.

Note that if the content of this element is RTL (right-to-left), the scroll bar will be at the far right (at the beginning of the content) and the value of scrollLeft will be 0. At this point, when you drag the scrollbar from right to left, the scrollLeft changes from 0 to negative (this feature doesn’t exist in Chrome).

ScrollLeft can be any integer, however:

If the element cannot be rolled (for example, the element does not overflow), the value of scrollLeft is 0.
If the value set to scrollLeft is less than 0, the value of scrollLeft will change to 0.
If the value set to scrollLeft is greater than the maximum element content width, the value of scrollLeft will be set to the maximum element width.

var  scrollLeft = element.scrollLeft; / / to get
element.scrollLeft = intValue; / / set
Copy the code

scrollWidth / scrollHeight

scrollWidth

Element.scrollWidth is a read-only property that returns, in units of px, the greater width of the Element’s content area or the Element’s own width. If the width of an element is greater than the area of its content (for example, if the element has a scroll bar), the value of scrollWidth is greater than clientWidth.

var scrollWidth = element.scrollWidth;
Copy the code

scrollHeight

Element.scrollHeight is a read-only property that is a measure of the height of an Element’s content, including content that is not visible in the view due to overflow. Without the vertical scroll bar, the scrollHeight is the same as the clientHeight minimum that the element view needs to fill everything. The padding of the element is included, but the border and margin are not. ScrollHeight also includes pseudo-elements like ::before and ::after.

var scrollHeight = element.scrollHeight;
Copy the code

scrollX / scrollY

scrollX

Returns the pixel value of the horizontal scrolling of the document/page, where the pageXOffset property is the alias of the scrollY property

var scrollX = window.scrollX;
Copy the code

The full compatibility code for getting the horizontal scrolling pixel values of a document/page:

var x = (window.pageXOffset ! = =undefined)?window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
Copy the code

scrollY

Returns the vertical scrolling pixel value of the document/page, where the pageYOffset property is the alias of the scrollY property

var scrollX = window.scrollY;
Copy the code

The complete compatibility code for getting the scrolling pixel values of the document/page in the vertical direction:

var y = (window.pageYOffset ! = =undefined)?window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
Copy the code

Please indicate the source of reprint, thank you!