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

Source: Internet
Author: User
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.

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.