2020-02-07
정리
: Javascript30을 공부한 내용 기록
getBoundingClientRect는 DOM Element의 위치를 구할 떄 사용한다.
// ...
const highlightLink = (event) => {
const linkCoords = event.getBoundingClientRect();
const coords = {
width: linkCoords.width,
height: linkCoords.height,
top: linkCoords.top + window.scrollY,
left: linkCoords.left + window.scrollX,
};
// ...
참조용 전체 코드.
const targets = document.querySelectorAll('a');
const highlight = document.createElement('span');
highlight.classList.add('highlight');
document.body.appendChild(highlight);
const highlightLink = (event) => {
const linkCoords = event.getBoundingClientRect();
const coords = {
width: linkCoords.width,
height: linkCoords.height,
top: linkCoords.top + window.scrollY,
left: linkCoords.left + window.scrollX,
};
highlight.style.width = `${coords.width}px`;
highlight.style.height = `${coords.height}px`;
highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
};
targets.forEach((a) =>
a.addEventListener('mouseenter', () => highlightLink(a))
);
👋