Examples and Analysis of comparison between scroll and offset in js

Source: Internet
Author: User

1. offsetTop:
The distance from the current object to the top of the upper layer.
You cannot assign a value to the object. Use the style. top attribute to set the distance from the object to the top of the page.

2. offsetLeft:
The distance from the current object to the left of its upper layer.
You cannot assign a value to the object. Use the style. left attribute to set the distance from the object to the left of the page.

3. offsetWidth:
The width of the current object.
And style. the difference between the width attribute is that, for example, if the width of an object is set to the percentage width, the style is displayed regardless of whether the page is larger or smaller. both width return this percentage, while offsetWidth returns the width value of the object in different pages instead of the percentage value.

4. offsetHeight:
And style. the difference between the height attribute is that, for example, if the object width is set to the percentage height, the style is displayed regardless of whether the page is larger or smaller. height returns this percentage, while offsetHeight returns the object height value on different pages, instead of the percentage value.

5. offsetParent:
The upper-level object of the current object.
Note. if the object is included in a DIV, this DIV will not be treated as the parent layer of the object (that is, the parent layer of the object will skip the DIV object) when the upper layer is a Table, no problem occurs.
This attribute can be used to obtain the absolute position of the current object on pages of different sizes.

6. scrollLeft:
The leftmost distance from the object to the left of the object in the range displayed in the current window.
That is, the distance pulled by the scroll bar when a horizontal scroll bar appears.

7. scrollTop
The distance from the top of the object to the top edge of the object in the range displayed in the current window.
That is, the distance pulled by the scroll bar when a vertical scroll bar appears.

 

[Code] test the html code of offsetTop and scrollTop.

Copy codeThe Code is as follows:
<Html>
<Head>
<Meta content = "text/html; charset = UTF-8" http-equiv = "content-type"/>


<Script type = "text/javascript">
Function test1 (){
Var div = document. getElementById ("div1 ");
Document. getElementById ("li1"). innerHTML = (div. offsetTop) + "px"; // distance between div1 and the top of the screen
Document. getElementById ("li2"). innerHTML = (div. offsetLeft) + "px"; // distance of div1 to the left of the screen
Document. getElementById ("li3"). innerHTML = (div. scrollTop) + "px"; // The scroll distance of the div1 vertical scroll bar
Document. getElementById ("li4"). innerHTML = (div. scrollLeft) + "px"; // The scroll distance of the div1 horizontal scroll bar
}
Function test2 (){
Var div = document. getElementById ("div2 ");
Document. getElementById ("li5"). innerHTML = (div. offsetTop) + "px"; // distance between div2 and the top of the screen
Document. getElementById ("li6"). innerHTML = (div. offsetLeft) + "px"; // distance of div2 to the left of the screen
Document. getElementById ("li7"). innerHTML = (div. scrollTop) + "px"; // The scroll distance of the div2 vertical scroll bar
Document. getElementById ("li8"). innerHTML = (div. scrollLeft) + "px"; // div2 horizontal scroll bar scrolling distance
}
Function test3 (){
Var div = document. getElementById ("div3 ");
Document. getElementById ("li9"). innerHTML = (div. offsetTop) + "px"; // distance between div3 and the top of the screen
Document. getElementById ("li10"). innerHTML = (div. offsetLeft) + "px"; // distance of div3 to the left of the screen
Document. getElementById ("li11"). innerHTML = (div. scrollTop) + "px"; // The scroll distance of the div3 vertical scroll bar
Document. getElementById ("li12"). innerHTML = (div. scrollLeft) + "px"; // The scroll distance of the div3 horizontal scroll bar
}

</Script>
</Head>
<Body style = "border: 10px solid red; padding: 0px 0px; margin: 5px 10px">
<Div>
<DIV style = "width: 70%; border-right: 1px dashed red; float: left;">
<Div style = "float: left;">
<Div id = "div1" style = "border: 5px blue solid; height: 400px; width: 200px; overflow: auto">
<Div style = "height: 500px; width: 400px"> this is test! </Div>
</Div>
<Input type = "button" value = "CLICK 1" onclick = "test1 ()" style = "border: 1px solid purple; height: 25px;"/>
</Div>
<Div>
<Div id = "div2" style = "border: 5px solid yellow; height: 400px; width: 200px; overflow: auto">
<Div style = "height: 500px; width: 400px"> this is test! </Div>
</Div>
<Input type = "button" value = "CLICK 2" onclick = "test2 ()" style = "border: 1px solid purple; height: 25px;"/>
</Div>
<Div style = "clear: both;">
<Div id = "div3" style = "border: 5px solid #0080C0; height: 400px; width: 200px; overflow: auto; clear: both;">
<Div style = "height: 500px; width: 400px"> this is test! </Div>
</Div>
<Input type = "button" value = "CLICK 3" onclick = "test3 ()" style = "border: 1px solid purple; height: 25px;"/>
</Div>
</DIV>
<DIV style = "width: 20%; float: right; margin-right: 100px">
<Ul> click1 result:
<Li id = "li1"> </li>
<Li id = "li2"> </li>
<Li id = "li3"> </li>
<Li id = "li4"> </li>
</Ul>
<Ul> click2 result:
<Li id = "li5"> </li>
<Li id = "li6"> </li>
<Li id = "li7"> </li>
<Li id = "li8"> </li>
</Ul>
<Ul> click3 results:
<Li id = "li9"> </li>
<Li id = "li10"> </li>
<Li id = "li11"> </li>
<Li id = "li12"> </li>
</Ul>
</DIV>
</Div>
</Body>
</Html>

The above is the code used for self-testing, which can be directly used for testing.

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.