<!doctype html>
<meta charset= "Utf-8" >
<title>offsetwidth, Offsetheight, OffsetTop, offsetleft</title>
<style>
*{
margin:0px Auto;
padding:0px;
}
#div1 {
width:400px;
height:400px;
Overflow-y:scroll;
border:1px solid #F60;
position:relative;
}
#div2 {
width:340px;
height:600px;
border:1px solid #36C;
}
</style>
<script>
function $ (ID) {
return document.getElementById (ID);
}
Window.onload=function () {
Alert ($ ("Div1"). offsetheight); 402=400 (own width) +2 (left and right border)
Alert ($ ("Div2"). offsetheight); 602=600+2
Alert ($ ("Div1"). offsetwidth); 402=400+2
Alert ($ ("Div2"). offsetwidth); 342=340+2
Alert ($ ("Div1"). OffsetTop); 0 distance from top to top of page
Alert ($ ("Div2"). OffsetTop); 1 distance from Div Top 1 is the border of that pixel
Alert ($ ("Div1"). offsetleft); 599 left distance from the left side of the page
Alert ($ ("Div2"). offsetleft); 21 distance from Div1 to the left
$ ("Div1"). scrolltop+=10;
Alert ($ ("Div1"). scrollheight); 1217 height of actual content
Alert ($ ("Div2"). scrollheight); 1216 Actual content Height
Alert ($ ("Div1"). ScrollWidth); 383 the width of the actual content minus the width of the scroll bar
Alert ($ ("Div2"). ScrollWidth); 340 Actual Content Height
Alert ($ ("Div1"). scrolltop); 10 roll in the height
Alert ($ ("Div2"). scrolltop); 0
Alert ($ ("Div1"). ScrollLeft); 0
Alert ($ ("Div2"). ScrollLeft); 0
}
</script>
<body>
<div id= "Div1" >
<div id= "Div2" >
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
<p> Fu Pinang Temple street vice Ke ji Ah room struggle is a large-caliber fan of the wind police killed </p>
</div>
</div>
<p>offsetheight: Returns the height, in pixels, of the element definition, including padding, excluding margins. </p>
<p>offsetwidth: Returns the width of the element definition, in pixels, including padding, excluding margins. </p>
<p>offsetleft: Returns the offset, in pixels, of the left edge of the current element to the left edge of its containing element. Note that the inner margin of the sub Div does not affect the offsetleft.
<p>offsettop: Returns the offset, in pixels, of the top boundary of the current element to its containing element. </p>
<p>scrollheight: Returns the actual height of the element, in pixels. </p>
<p>scrollwdith: Returns the actual width of the element, in pixels. </p>
<p>scrolltop: Returns the number of pixels that have scrolled to the top edge of the element. These pixels are useful only when the element has a scrollbar. If you do not drag the scroll bar, the default value is 0</p>
<p>scrollleft: Returns the number of pixels that have scrolled to the left edge of the element. These pixels are useful only when the element has a scrollbar. If you do not drag the scroll bar, the default value is 0</p>
</body>
Some operations of OFFSETXXX and SCOLLXXX
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
