Examples and analysis of comparison using scroll and offset in js_javascript skills

1.offsetTop :
The distance from the current object to the top of its parent layer.
It cannot be assigned a value. To set the distance from the object to the top of the page, please use the style.top attribute.

2.offsetLeft :
The distance between the current object and the left side of its parent layer.
It cannot be assigned a value. To set the distance between the object and the left part of the page, please use the style.left attribute.

3.offsetWidth :
The width of the current object. The difference between
and style.width properties is that if the width of the object is set to a percentage width, no matter whether the page becomes larger or smaller, style.width Both return this percentage, while offsetWidth returns the width value of the object in different pages instead of the percentage value

4.offsetHeight: The difference between
and the style.height property is that if the width of the object is set to a percentage height, no matter whether the page becomes larger or smaller, style.height will return this percentage, while offsetHeight will Return the height value of the object in different pages instead of the percentage value

5.offsetParent :
The superior layer object of the current object.
Note. If the object is included in a DIV, this DIV will not be regarded as the superior layer of this object (that is, the superior layer of the object The layer will skip DIV objects) There will be no problem when the upper layer is Table.
Using this attribute, you can get the absolute position of the current object in pages of different sizes.

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

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

【Code】HTML code for testing offsetTop and scrollTop

   

   

       

           

               

this is test!

           

           
       

       

           

               

this is test!

           

           
       

       

           

               

this is test!

           

           
       

   

   

       

click1结果：
           

           

           

           

       

       

click2结果：
           

           

           

           

       

       

click3结果：