js 이미지 크기 조정 후의 실제 너비,위치 등 정 보 를 가 져 옵 니 다.

프로젝트 에서 그림 의 실제 디 스 플레이 사이즈 에 대한 판정 문제 에 부 딪 혔 습 니 다.그림 이 크기 를 조정 할 수 있 기 때문에 실제 디 스 플레이 의 너비 와 높이 는 흔히 볼 수 있 는 각종 width,height 를 통 해 얻 을 수 없습니다.(그림 의 자연 너비 나 글자 폭 을 얻 는 것 이지 실제 디 스 플레이 결과 가 아 닙 니 다)
인터넷 바 이 두 를 한 바퀴 돌 았 지만 찾 지 못 했 습 니 다.오늘 아침 에 우연히 두 가지 편리 한 방법 을 찾 았 습 니 다.
object.getClientRects();object.getBoundingClient Rect();
현재 요소 의 절대 위 치 를 쉽게 얻 을 수 있 습 니 다.
getClient Rects 와 getBounding Client Rect 의 차이
getClient Rects 는 TextRectangle 집합 을 되 돌려 줍 니 다.바로 TextRectangleList 대상 입 니 다.
getBoundingClient Rect 는 TextRectangle 대상 을 되 돌려 줍 니 다.DOM 에 텍스트 가 없어 도 TextRectangle 대상 을 되 돌려 줍 니 다.
브 라 우 저 차이:
safari,fireforx 2.0 을 제외 한 모든 브 라 우 저 는 getClient Rects 와 getBounding Client Rect 를 지원 합 니 다.
Firefox 3.1 은 TextRectangle 에 width 와 height 를 추 가 했 습 니 다.
ie 와 비 ie 브 라 우 저 는 getClient Rects 를 사용 하 는 것 과 차이 가 있 습 니 다.ie 는 TextRectangleList 를 가 져 오 는 범위 가 매우 큽 니 다.i 가 아 닌 범위 가 작 습 니 다.display:inline 의 대상 만 TextRectangleList,예 를 들 어 em i span 등 탭 을 가 져 올 수 있 습 니 다.
테스트 를 통 해 적어도 Chrome 2+\Safari 4\Firefox 3.5\\0pera 9.63+는 getBoundingClient Rect 방법 을 지원 합 니 다.
브 라 우 저 호 환 을 고려 하여 현재 가장 많이 사용 되 는 것 은 getBoundingClient Rect 입 니 다.element 요소 의 view port 좌 표를 가 져 오 는 데 자주 사 용 됩 니 다.
MDN getBoundingClient Rect 에 대한 상세 한 설명:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!