js_javascript 스킬에서 스크롤과 오프셋을 이용한 비교 예시 및 분석

1.offsetTop :
현재 개체에서 상위 레이어 상단까지의 거리입니다.
값을 할당할 수 없습니다. 개체에서 페이지 상단까지의 거리를 설정하려면 다음을 사용하세요. style.top 속성.

2.offsetLeft :
현재 개체와 상위 레이어의 왼쪽 사이의 거리입니다.
값을 할당할 수 없습니다. 개체와 페이지 왼쪽 부분 사이의 거리를 설정하려면 style.left 속성을 사용해 주세요.

3.offsetWidth :
현재 개체의 너비입니다.
속성과 style.width 속성의 차이점은 개체의 너비를 백분율 너비로 설정하면 페이지가 커져도 상관없다는 것입니다. 이하, style.width 둘 다 이 백분율을 반환하는 반면, offsetWidth는 백분율 값 대신 다른 페이지에 있는 개체의 너비 값을 반환합니다

4.offsetHeight:
과 style.height 속성의 차이점은 개체의 너비가 백분율 높이로 설정된 경우 페이지가 커지든 작아지든 관계없이 style.height가 이를 반환한다는 것입니다. offsetHeight는 백분율 값 대신 다른 페이지에 있는 개체의 높이 값을 반환합니다

5.offsetParent :
현재 객체의 상위 레이어 객체입니다.
참고. 객체가 DIV에 포함된 경우 이 DIV는 이 객체의 상위 레이어로 간주되지 않습니다. 객체의 상위 레이어 레이어는 DIV 객체를 건너뜁니다.
이 속성을 사용하면 다양한 크기의 페이지에서 현재 객체의 절대 위치를 얻을 수 있습니다.

6.scrollLeft :
현재 창에 표시된 범위 내에서 개체의 가장 왼쪽부터 개체의 왼쪽까지의 거리입니다.
즉, 가로 스크롤바가 나타날 때 스크롤바를 끌어당긴 거리입니다.

7.scrollTop
현재 창에 표시된 범위 내에서 개체의 상단에서 개체의 상단 가장자리까지의 거리입니다.
즉, 세로 스크롤바가 나타날 때 스크롤바를 끌어당긴 거리입니다.

【코드】offsetTop 및 scrollTop 테스트를 위한 HTML 코드

   

   

       

           

               

this is test!

           

           
       

       

           

               

this is test!

           

           
       

       

           

               

this is test!

           

           
       

   

   

       

click1结果：
           

           

           
• 
             

       

       

click2结果：
           

           
• 
             

            < ;li id="li8">
       

       

click3结果：
           

           

           

           
• < ;/li>