[JavaScript30] Day 22

Follow Along Link Highlighter

 

const triggers = document.querySelectorAll('a');
const highlight = document.createElement('span');
highlight.classList.add('highlight');
document.body.append(highlight);

function highlightLink() {
  console.log('Highlight!!');
}

triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));

link 부분에 마우스가 올라가면 console창에 Highlight 메세지가 뜬다.

const triggers = document.querySelectorAll('a');
const highlight = document.createElement('span');
highlight.classList.add('highlight');
document.body.append(highlight);

function highlightLink() {
  // console.log('Highlight!!');
  console.log(this);
}

triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));

this로 마우스가 올라간 부분을 직접 확인할수 있다.

const triggers = document.querySelectorAll('a');
const highlight = document.createElement('span');
highlight.classList.add('highlight');
document.body.append(highlight);

function highlightLink() {
  const linkCoords = this.getBoundingClientRect();
  console.log(linkCoords);
}

triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));

const triggers = document.querySelectorAll('a');
const highlight = document.createElement('span');
highlight.classList.add('highlight');
document.body.append(highlight);

function highlightLink() {
  const linkCoords = this.getBoundingClientRect();
  console.log(linkCoords);
  highlight.style.width = `${linkCoords.width}px`;
  highlight.style.height = `${linkCoords.height}px`;
  highlight.style.transform = `translate(${linkCoords.left}px, ${linkCoords.top}px)`;
}

triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));
</script>

이렇게 생긴 highlight들은 위치도 잘잡고 각각의 사이즈의 맞춰서 보이게된다.

하지만 지금 상태에서는 스크롤이 되면 마우스를 올린곳과 표시된 곳의 위치가 맞지 않는 오류가 생긴다.

position의 top과 left의 값에 스크롤 한 만큼의 위치를 더해주면

스크롤 후 마우스를 올려도 제대로 위치를 잡을 수 있다.

 

최종코드

const triggers = document.querySelectorAll('a');
const highlight = document.createElement('span');
highlight.classList.add('highlight');
document.body.append(highlight);

function highlightLink() {
  const linkCoords = this.getBoundingClientRect();
  console.log(linkCoords);
  const coords = {
    width: linkCoords.width,
    height: linkCoords.height,
    top: linkCoords.top + window.scrollY,
    left: linkCoords.left + window.scrollX
  };

  highlight.style.width = `${linkCoords.width}px`;
  highlight.style.height = `${linkCoords.height}px`;
  highlight.style.transform = `translate(${linkCoords.left}px, ${linkCoords.top}px)`;
}

triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));

 

 

JavaScript30 강의를 보고 공부한 글입니다. (https://javascript30.com/)