js 의 scroll 과 offset 사용 비교 실례 및 분석
2.offsetLeft :현재 대상 이 상위 층 왼쪽 에 있 는 거리 입 니 다. 값 을 부여 할 수 없습니다. 대상 이 페이지 왼쪽 에 있 는 거 리 를 설정 하려 면 style. left 속성 을 사용 하 십시오.
3.offsetWidth :현재 대상 의 너비. style. width 속성 과 의 차 이 는 대상 의 너비 설정 값 이 백분율 너비 일 경우 페이지 가 커지 든 작 아 지 든 style. width 는 이 백분율 을 되 돌려 주 고, offsetWidth 는 백분율 이 아 닌 다른 페이지 의 대상 의 너비 값 을 되 돌려 줍 니 다.
4. offset Height: style. height 속성 과 의 차 이 는 대상 의 너비 설정 값 이 백분율 높이 일 경우 페이지 가 커지 든 작 아 지 든 style. height 는 이 백분율 을 되 돌려 주 고, offset Height 는 백분율 값 이 아 닌 다른 페이지 의 대상 의 높이 값 을 되 돌려 줍 니 다.
5.offsetParent :현재 대상 의 상위 층 대상 입 니 다. 주의 하 십시오. 대상 이 하나의 DIV 에 포함 되 어 있 을 때 이 DIV 는 이 대상 의 상위 층 으로 간주 되 지 않 습 니 다. (즉, 대상 의 상위 층 이 DIV 대상 을 건 너 뛰 는 것 입 니 다) 상위 층 이 Table 일 때 문제 가 되 지 않 습 니 다. 이 속성 을 이용 하면 현재 이미지 가 서로 다른 크기 의 페이지 에 있 는 절대 위 치 를 얻 을 수 있 습 니 다.
6.scrollLeft :대상 의 가장 왼쪽 에서 대상 이 현재 창 에 표 시 된 범위 내의 왼쪽 거리 입 니 다. 즉, 가로 스크롤 바 가 나타 난 상황 에서 스크롤 바 가 당 겨 지 는 거리 입 니 다.
7. scrollTop 대상 의 맨 위 에서 대상 이 현재 창 에 표 시 된 범위 내의 맨 위 까지 의 거리 입 니 다. 즉, 세로 스크롤 바 가 나타 난 상태 에서 스크롤 바 가 당 겨 지 는 거리 입 니 다.
【 코드 】 offsetTop 과 scrollTop 의 html 코드 테스트
<br> function test1(){<br> var div = document.getElementById("div1");<br> document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1 <br> document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1 <br> document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1 <br> document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1 <br> }<br> function test2(){<br> var div = document.getElementById("div2");<br> document.getElementById("li5").innerHTML = (div.offsetTop)+"px";//div2 <br> document.getElementById("li6").innerHTML = (div.offsetLeft)+"px";//div2 <br> document.getElementById("li7").innerHTML = (div.scrollTop)+"px";//div2 <br> document.getElementById("li8").innerHTML = (div.scrollLeft)+"px";//div2 <br> }<br> function test3(){<br> var div = document.getElementById("div3");<br> document.getElementById("li9").innerHTML = (div.offsetTop)+"px";//div3 <br> document.getElementById("li10").innerHTML = (div.offsetLeft)+"px";//div3 <br> document.getElementById("li11").innerHTML = (div.scrollTop)+"px";//div3 <br> document.getElementById("li12").innerHTML = (div.scrollLeft)+"px";//div3 <br> }<br><br>
this is test!
this is test!
this is test!
click1 ：
click2 ：
click3 ：
위 에 자신 이 테스트 하 는 코드 가 있 으 니 직접 테스트 할 수 있 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
