getBoundingClientRect 로 요소 좌표 얻기
✔️ x와 y : 요소를 감싸는 네모의 창 기준 x, y 좌표
✔️ width/height : 요소의 너비/높이
✔️ top/bottom : 요소릘 감싸는 네모의 위쪽 모서리/아래쪽 모서리의 y 좌표
✔️ left/right : 요소를 감싸는 네모의 왼쪽 모서리/오른쪽 모서리의 x 좌표
elementFromPoint(x,y)
✔️ 창 기준 좌표(x,y) 에서 가장 가까운 중첩 요소를 반환
✔️ 문법
let elem = document.elementFromPoint(x, y);
요소를 창 내 특정 좌표에 고정하기
✔️ getBoundingClientRect
<body>
<div id="coords-show-mark">idididi</div>
<script>
let elem = document.getElementById("coords-show-mark");
//elem 밑에 만들어질 멧시지를 생성하는 함수를 만들어라.
function createMessageUnder(elem, html){
let message = document.createElement('div');
message.style.cssText = "position:fixed; color:red;";
let coords = elem.getBoundingClientRect();
message.style.left = coords.left + "px";
message.style.top= coords.bottom + "px";
message.innerHTML = html;
return message;
}
let message = createMessageUnder(elem, '하이루');
document.body.append(message);
setTimeout(() => message.remove(),5000);
</script>
Reference
반응형
'Frontend > JavaScript' 카테고리의 다른 글
| [Javascript] 브라우저 기본 동작 (0) | 2022.01.16 |
|---|---|
| [Javascript] 브라우저 이벤트 소개 (0) | 2022.01.14 |
| [Javascript] 브라우저 창 사이즈와 스크롤 (0) | 2022.01.13 |
| [Javascript] 요소 사이즈와 스크롤 (0) | 2022.01.13 |
| [Javascript] 스타일과 클래스 (0) | 2022.01.13 |