먼저이 버그가 어떻게 발생하는지 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
<스타일 유형 = "텍스트/CSS">
#div1 {
너비 : 200px;
높이 : 200px;
배경 : 빨간색;
}
</스타일>
코드 사본은 다음과 같습니다.
<body>
<div id = "div1">
</div>
</body>
다음은 DIV를 점차 좁게 만들기 위해 테스트하는 데 사용되는 JavaScript 코드입니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
setInterval (function () {
var odiv = document.getElementById ( "div1");
odiv.style.width = odiv.offsetwidth-1+'px';
}, 30);
</스크립트>
JavaScript 코드는 매우 간단하고 실행하는 데 아무런 문제가 없으며 원하는 DIV가 점차 작아지고 있습니다.
그렇다면이 오프셋 버그는 어떻게 생겼습니까?
이제 스타일을 움직이면 마술 같은 일이 일어날 것입니다. . .
우리는 div1 : 1px solid #ccccff에 스타일 테두리를 추가합니다.
코드 사본은 다음과 같습니다.
<스타일 유형 = "텍스트/CSS">
#div1 {
너비 : 200px;
높이 : 200px;
배경 : 빨간색;
국경 : 1px 고체 #ccccff;
}
</스타일>
현재 코드를 실행할 때 DIV가 점차 오른쪽으로 증가하고 있음을 알았습니다. . . 이미지 버그가 나타났습니다. . . . 분명히 마이너스 1입니다. 왜 이런 일이 발생합니까?
오프셋의 특성에 대해 생각해 봅시다.
예 : DIV 너비 : 200px 테두리 1px. 실제로, 그가 얻는 오프셋 폭은 202px입니다.
그래서, 움직임이 처음 시작되었을 때, div의 너비는 실제로 200px 였고 오프셋의 폭은 202였습니다.
현재 Odiv.style.width = Odiv.offsetWidth-1+'PX'; 이 문장은 Odiv.style.width = 202-1 = 201px와 같습니다. 그런 다음 값을 너비에 할당하십시오
이 문장이 다시 실행되면 DIV의 너비는 201px입니다. 이 경우 매번 1px가 추가되며 점차 점점 커집니다. 이것은 오프셋의 버그입니다.
이 문제를 해결하는 방법?
실제로, 당신은이 오프 세트 전체가 필요하지 않습니다. 우리는 너비를 사용합니다! ! CSS 스타일에서 직접 너비를 얻는 기능 작성
줄 사이에 있지 않은 스타일을 얻으십시오.
코드 사본은 다음과 같습니다.
함수 getStyle (obj, name) {
if (obj.currentStyle) {
return obj.currentStyle [이름];
} 또 다른 {
GetComputedStyle (OBJ, NULL) [이름]을 반환합니다.
}
}
그런 다음 원본 코드를 수정합니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
setInterval (function () {
var odiv = document.getElementById ( "div1");
odiv.style.width = parseint (getstyle (odiv, 'width')) -1+'px';
}, 30);
함수 getStyle (obj, name) {
if (obj.currentStyle) {
return obj.currentStyle [이름];
} 또 다른 {
GetComputedStyle (OBJ, NULL) [이름]을 반환합니다.
}
}
</스크립트>
이렇게하면 프로그램 실행에 아무런 문제가 없습니다.