ScrollWidth (Height/Left/Top), offsetWidth (Height/Left/Top), and clientWidth (Height/Left/Top) in DOM)

Source: Internet
Author: User

(1) The test code is as follows:

<style type="text/css">    *{         margin: 0;        padding: 0;    }    #myDiv{        width: 100px;        padding: 5px;        height: 100px;        border: #000 5px solid;        margin: 100px;        overflow:scroll;    }</style>

Browser: chrome22 firefox12.0 IE9 & IE6

The pop-up results show that all values except scrollHeight are the same (Note: Before testing, make sure that the html document structure is complete and that the document declaration is specified. If the document declaration is missing, a problem occurs in the Box Model in ie and the pop-up result changes .)

The pop-up value is as follows:

(2) Explain scroll -- offset -- client based on the preceding css values.

ScrollWidth (the width of the content in the element does not contain the border and scrollbar of edge properties) = width + padding-scrollbarWidth;

ScrollHeight (same as scrollWidth) = Height + padding-scrollbarHeight;

For scrollWidth and scrollHeight, note that when the width or height of the content exceeds the actual width/height (such as the width and height defined by css, scrollWidth/Height is used to display its features. Its value is the width and Height of the actual content (greater than the actual width/Height of the container ).

This test does not show scrollLeft and scrollTop. In fact, these two values are displayed only when the content exceeds the element. For example, if the width is PX, but the actual content is PX, when you drag the scrollbar to the middle position, the content is greater than 25 PX for each element, and the scrollLeft value is 25. Therefore, scrollLeft refers to the distance between the current left boundary of the content and the actual left boundary of the content. The principle of scrollHeight is the same as that of scrollHeight.

OffsetWidth (visible width of the element) = width + padding + border

OffsetHeight (visible height of the element) = height + padding + border

OffsetLeft (the distance between the left boundary visible to the element and the left boundary closest to the element itself) = margin-left

OffsetTop (the distance between the visible upper boundary of an element and the upper boundary closest to the element itself) = margin-top

ClientWidth (visible width of the element content, equivalent to scrollWidth when the element content does not exceed the actual width) = width + padding-scrollbarWidth;

ClientWidth (visible Height of the element content, equivalent to scrollHeight when the element content does not exceed the actual Height) = Height + padding-scrollbarHeight;

 

 

 

 

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.