Motion_javascript 기술의 Javascript 오프셋 버그 솔루션

먼저 이 버그가 어떻게 발생하는지 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다. #div1 { 너비: 200px; 높이: 200px; 배경: 빨간색; } >

코드 복사 코드는 다음과 같습니다. ~ >

다음은 테스트에 사용된 Javascript 코드로, div를 천천히 좁히는 것이 목적입니다.

코드 복사

코드는 다음과 같습니다. setInterval(function(){ var oDiv=document.getElementById("div1"); oDiv.style.width=oDiv.offsetWidth-1 'px'; },30); >

Javascript 코드는 매우 간단해서 실행해 보면 원하는 div가 점차 작아질 것입니다.

그럼 이 오프셋 버그는 어디서 나오는 걸까요?

이제 스타일을 바꾸면 마법 같은 일이 일어날 것입니다. . . div1에 스타일 테두리를 추가합니다: 1px 솔리드 #CCCCFF;

코드 복사

코드는 다음과 같습니다.

#div1 { 너비: 200px; > > 높이 : 200px; 배경: 빨간색; 테두리: 1px 실선 #CCCCFF; } > 이때 코드를 실행해보면 div가 오른쪽으로 천천히 증가하는 것을 볼 수 있습니다. . . image BUG가 갑자기 나타났습니다. . . . 분명히 마이너스 1입니다. 왜 이런 일이 발생합니까?

오프셋의 특징을 생각해보자:

예: div 너비: 200px 테두리 1px. 실제로 그가 얻은 offsetWidth는 202px입니다.

그럼 이동이 막 시작되었을 때 div의 너비는 실제로 200px이므로 offsetWidth는 202였습니다.

이때 oDiv.style.width=oDiv.offsetWidth-1 'px'; 이 문장은 oDiv.style.width=202-1=201px와 동일하며 width에 할당합니다

이 문장을 다시 실행하면 div의 너비는 201px입니다. 이 경우 매번 1px씩 늘어나지만 점차 커집니다. 오프셋 버그입니다.

이 문제를 어떻게 해결하나요?

사실 이 offsetWidth는 필요하지 않습니다. 우리는 너비를 사용합니다! ! CSS 스타일로 너비를 직접 구하는 함수를 작성하세요

줄 사이에 없는 스타일 가져오기:

코드 복사 코드는 다음과 같습니다. function getStyle(obj, 이름) { If (obj.currentStyle) { return obj.currentStyle[이름]; } else { return getCompulatedStyle(obj, null)[name]; } } 그런 다음 원래 코드를 수정해 보겠습니다.

코드 복사 코드는 다음과 같습니다. setInterval(function(){ var oDiv=document.getElementById("div1"); oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1 'px'; },30); 함수 getStyle(obj, 이름) { If (obj.currentStyle) { return obj.currentStyle[이름]; } else { return getCompulatedStyle(obj, null)[name]; } } > 이렇게 하면 프로그램이 문제 없이 실행됩니다.