"Comprehensive summary" JS get element position size

Source: Internet
Author: User

Catalogue1. About Offsetoffsetparent (Read only)
OffsetTop (read-only) offsetleft (read-only) offsetheight (read-only) offsetwidth (read-only) 2. Scrolling size Scroll
ScrollWidth (Read only) scrollheight (read only) scrollleft (writable) scrolltop (writable) 3. About Clientclientwidth (read only) Clentheight (read-only) ClientLeft (read only) ClientTop (Read only) 4. About Clientrectgetboundingclientrect
5. Application Scenario 1. Picture Lazy Loading 1. About offsetoffsetParent (read only)Htmlelement.offsetparent is a read-only property that returns a pointer to theof recent(closest, refers to the most recent at the inclusion level)The anchor element that contains the element。 If there are no positioned elements, the offsetParent is the nearesttable, table cell or root element(Html;quirks mode is the body in standard mode). When the element's style.display is set to "None", OffsetParent returns NULL. OffsetParent is useful because both offsetTop and offsetleft are relative to their inner margin boundaries.Compatibility:In Webkit, if the element is hidden (the element or its ancestor element's style.display is "none"), or the element's style.position is set to "fixed", the property returns NULL. In IE 9, if the element's style.position is set to "fixed", the property returns NULL. (Display:none no effect.) )block-level elements & inline ElementsFor block-level elements, OffsetTop, Offsetleft, offsetwidth, and offsetheight describe the bounding box of the element relative to the 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 (using element.getclientrects () to get its width and height), and offsetwidth and Offsetheight describes the dimension of the bounding box (using Element.getboundingclientrect to get 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.OffsetTop (read only)Htmlelement.offsettop is a read-only property that returns the distance from the top of the current element relative to its offsetParent element.offsetleft (read only)Htmlelement.offsetleft is a read-only property that returnstop left corner of current elementThe pixel value that is offset relative to the left edge of the Htmlelement.offsetparent node.offsetheight (read only)Htmlelement.offsetheight is a read-only property that returns the pixel height of the element, the heightcontains the vertical padding and border of the element, and is an integer. Typically, the offsetheight of an element is a measure of the height of an element's CSS, including the bounding rectangle of the element, padding, and the horizontal scrollbar of the element (if present and rendered), not including the height of the pseudo-class element: Before or: After. For the body object of the document, it includes a high linear total of css height in place of the element. The down-stretched content height of the floating element is ignored.offsetwidth (read only)Is? Htmlelement.offsetwidth is a read-only property that returns the layout width of an element. A typical (translator note: The offsetwidth of each browser may vary) offsetwidth is the measurement of the bounding rectangle (border) of the containing element, the padding on the horizontal line (padding), the vertical scrollbar (scrollbar) (if present), and the width value of the CSS settings.2. Scrolling size scrollYou can set these values to control scrollingscrollwidth (read only)The ScrollWidth read-only property of the element returns the value of the element's content area width or the greater of the width of the element itself, in PX units. If the width of the element is greater than the area of its content (for example, if the element has scrollbars), the value of ScrollWidth is greater than clientwidthscrollheight (read only)Element.scrollheight is a read-only attribute of the content height of the metering element.include the overflow style property caused by the view is not visible in the content。 In the absence of a vertical scrollbar, the scrollheight value is clientheight the same as the minimum value required for the element view to populate all content.include the padding of the element, but not the margin of the element.scrollleft (writable)The Element.scrollleft property can read or set the distance from the element scroll bar to the left of the element. Note that if the content direction (direction) of this element is RTL (Right-to-left), then the scrollbar will be at the far right (the beginning of the content) and the ScrollLeft value is 0. At this point, when you drag the scrollbar from right to left, scrollleft changes from 0 to negative (this feature does not exist in the Chrome browser).scrolltop (writable)This element.scrolltop property can set or get the pixel distance that an element is being rolled up. The scrolltop of an element is the ability to calculate the maximum height of this element from the top of its container. When the container of an element does not produce a vertical scroll bar, its scrolltop value defaults to 0.Note:Get the page up scrolling distance, there are browser compatibility issues, get method: document.documentelement.scrolltop| | Document.body.scrollTop3. About Clientclientwidth (read only)The Element.clientwidth property represents the internal width of the element, in pixels. This property includes padding, but does not include vertical scrollbars (if any), borders, and margins.Clentheight (read only)Returns the height (in pixels) of an element, including padding, but excluding horizontal scrollbars, borders, and margins. ClientHeight can be calculated by CSS height + CSS padding-horizontal scrollbar height (if present). Get page Height: document.documentElement.clientHeightClientLeft (read only)Represents the width of the left border of an element, expressed in pixels. If the text direction of an element is right-to-left (RTL, Right-to-left), and because a content overflow causes a vertical scroll bar to appear to the left, the property includes the width of the scrollbar. The clientleft does not include the left margin and the left inner margin. ClientLeft is read-only.ClientTop (read only)The width, in pixels, of the top border of an element. Does not include the top margin or the inner margin. ClientTop is read-only.4. About ClientrectGetboundingclientrectThe Element.getboundingclientrect () method returns the size of the element and itsrelative to the viewportThe location. The return value is a Domrect object that is a set of rectangles returned by the Getclientrects () method of the element, that is, the collection of CSS borders associated with the element. The Domrect object contains a set of read-only properties that describe the border,--left, top, right, and bottom, in pixels. Attributes other than width and height are relative to the position of the upper-left corner of the viewport when the bounding rectangle is computed, scrolling is considered within the viewport area (or other scrollable elements), which means that the top and left property values change immediately when the scroll position changes (therefore, their values arerelative to the viewport, not absolute.)。Compatibility:The accident is good, there are wood?!Viewport: Browser visible areaPC-side: The viewport can be adjusted on the mobile side: the viewport is fixed 5. Application ScenariosPicture Lazy LoadingTutorial: nirvana-zsy/Pictures Lazy loading Demogithub Source: nirvana-zsy/lazyload

"Comprehensive summary" JS get element position size

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.