read : ResizeObserver : 기술 #html #resize #observer::공대여자홈

ResizeObserver

작성자 공대여자

작성 : 2020-09-07 10:17 조회 : 290
지남 1일간

2020-09-07 - 2020-09-07

좌표
외부링크

🔗 https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

ResizeObserver

요소의 크기가 변경을 감시한다.

크롬 PC 버전

( 버전 85.0.4183.83(공식 빌드) (64비트) )
( Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36 )
요소에 대한 응답으로 가져오는 값은

아래와 같은 모양을 가진다.

ResizeObserverEntry {target: div.bg-box.ffot-body-content, contentRect: DOMRectReadOnly, borderBoxSize: Array(1), contentBoxSize: Array(1), devicePixelContentBoxSize: Array(1)}

borderBoxSize: [ResizeObserverSize]
contentBoxSize: [ResizeObserverSize]
contentRect: DOMRectReadOnly {x: 0, y: 0, width: 1066.75, height: 24, top: 0, …}
devicePixelContentBoxSize: [ResizeObserverSize]
target: div.bg-box.ffot-body-content
__proto__: ResizeObserverEntry

ㅁㅁㅁ

크롬 모바일에서 동작할 경우

( Mozilla/5.0 (Linux; Android 10; SM-N976N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Mobile Safari/537.36 )

ResizeObserverEntry {target: div.ffot-header-00, contentRect: DOMRectReadOnly}

contentRect: DOMRectReadOnly {x: 0, y: 0, width: 70.46875, height: 24, top: 0, …}
target: div.ffot-header-00
__proto__: ResizeObserverEntry

처럼 가져온다. 즉, 가져오는 값에 차이가 있다!

No	제목	작성자	등록	조회
공지	[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)	공대여자	02/06 13:44	1029
공지	유용한 리눅스(LINUX) 명령어	공대여자	03/03 14:47	10929
공지	[공지] 기술 게시판	mins01	06/24 15:10	11126

일	월	화	수	목	금	토
3.31	4.1	4.2	4.3	4.4	4.5	4.6
4.7	4.8	4.9 game_tictactoe 2	4.10	4.11	4.12	4.13
4.14	4.15	4.16	4.17 :scope selector , querySelector 에서 this, self node 지정 1	4.18	4.19	4.20
4.21	4.22	4.23 ui_treemap new 2	4.24	4.25	4.26	4.27
4.28	4.29	4.30	5.1	5.2	5.3	5.4