[JS] Day22 - Follow Along Link

jiseong·2021년 9월 8일
0

T I Learned

목록 보기
59/291
post-thumbnail

demo:

demo사이트

github:

Danji-ya


🎯 기능 요구사항

  • 특정 요소에 마우스 오버 시 하이라이트 기능을 구현한다.

🚀 배운 점

offsetWidth VS getboundingclientrect

function toggleHighlight() {
    const clientRect = this.getBoundingClientRect();

    highlighter.style.width = `${this.offsetWidth}px`;
    highlighter.style.height = `${this.offsetHeight}px`;
    highlighter.style.transform = `translate(${clientRect.left + window.pageXOffset}px, ${clientRect.top + window.pageYOffset}px)`;
}

내가 작성한 코드는 offsetWidth를 이용했는데 wesbos씨는 getBoundingClientRect().width를 이용하였다. 해당 day22 코드 상으로는 동일한 결과가 나오겠지만 아주 큰 차이점이 존재한다.

  • 반환 값
    getBoundingClientRect().width는 소숫점까지 반환
    offsetWidth는 반올림된 정수값을 반환
  • 렌더링된 값 ❗
    만약 width가 100px인 요소에 scale(0.5)를 주었다면
    getBoundingClientRect().width는 50px
    offsetWidth는 100px이 나오게 된다.
	<style>
         .test {
            height: 100px;
            width: 100px;
            background: red;
            transform: scale(0.5);
         }
    	</style>
	<body>
    		<div class="test"></div>
	</body>

0개의 댓글