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
는 반올림된 정수값을 반환getBoundingClientRect().width
는 50pxoffsetWidth
는 100px이 나오게 된다. <style>
.test {
height: 100px;
width: 100px;
background: red;
transform: scale(0.5);
}
</style>
<body>
<div class="test"></div>
</body>