Home > Developer > JavaScript
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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
