JS 요소의 오프셋 탑, 오프셋 레프트 및 기타 속성을 가져옵니다.
obj.clientWidth // 요소의 너비를 가져옵니다
obj.clientHeight // 요소의 높이
obj.offsetleft // 부모 요소의 왼쪽과 관련된 요소
obj.offsettop // 부모 요소에 대한 요소의 상단
obj.offsetwidth // 요소의 너비
obj.offsetheight // 요소의 높이
차이 :
clientWidth = 너비 + 패딩
ClientHeight = 높이 + 패딩
offsetwidth = width + padding + 테두리
OffSetheight = Width + Padding + 테두리
오프셋은 클라이언트보다 테두리 너비가 더 많습니다
// 요소의 수평 좌표를 가져옵니다 (창에 대한) 함수 getTop (e) {var offset = e.offsettop; if (e.offsetparent! = null) 오프셋+= getTop (e.offsetparent); 오프셋 리턴;} // 요소의 수평 좌표 (창에 대한) 함수 getleft (e) {var offset = e.offsetleft; if (e.offsetparent! = null) 오프셋+= getleft (e.offsetparent); 오프셋 리턴;}요소 위치 얻기에 관한 JS 기사도 작성했습니다. JS는 요소의 오프셋 탑, 오프셋 및 기타 속성을 얻습니다. OffsetTop 및 OffsetLeft 속성을 통해 창에 대한 요소의 위치를 얻을 수 있지만, 오프셋 탑 및 오프셋 속성 속성은 부모 요소에 비해 위치되어 있으며, 일반적으로 위치를 얻는 데 필요한 요소는 가장 바깥쪽에 있지 않으므로 상단 요소가 횡단되지 않는 속성이 불가능합니다. 그런 다음 효율성이 문제가됩니다.
// 요소 (창에 대한) 함수의 수평 좌표를 가져옵니다. getTop (e) {e) {var 오프셋 = e.offsetTop; if (e.offsetparent! = null) 오프셋+= getTop (e.offsetparent);} // 요소의 수평 좌표를 얻습니다 (e) {var var. 오프셋 = e.offsetleft; if (e.offsetparent! = null) 오프셋+= getleft (e.offsetparent); return 오프셋;}다행히도 브라우저는 해당 인터페이스 getBoundingClientRect를 제공했습니다. 이 방법은 IE 브라우저에 처음 나타났습니다. 나중에 브라우저 도이 방법을 지원했으며 더 완벽했습니다. 즉, 요소의 왼쪽, 상단, 하단 및 오른쪽 속성 만 얻을 수 있으며 이후의 최신 브라우저는 요소의 너비와 너비를 얻을 수 있습니다.
| 크롬 | Firefox (Gecko) | 인터넷 익스플로러 | 오페라 | 원정 여행 |
|---|---|---|---|---|
| 1.0 | 3.0 (1.9) | 4.0 | (예) | 4.0 |
여기서 바닥은 창의 하단에 대한 CSS의 위치 하단이 아니라 요소의 하단과 창 상단 사이의 거리라는 점에 유의해야합니다. 마찬가지로 RIHGT 속성은 가장 오른쪽 요소와 창의 왼쪽 사이의 거리입니다.
var box = document.getElementById ( "box"); var pos = box.getBoundingClientRect (); box.innerhtml = "상단 :"+pos.top+"왼쪽 :"+pos.left+"밑바닥 :"+pos.bottom+"오른쪽 :"+pos.right+"width :"+pos.width+"높이 :"+pos. "
원본 기사, 재 인쇄를 표시하십시오 : 프론트 엔드 개발에서 재 인쇄