아래 루틴을 살펴보자
다음과 같이 코드 코드를 복사합니다.
<스크립트 유형="텍스트/자바스크립트">
var 타이머
함수 stopMove(){
클리어 인터벌(타이머)
}
함수 startMove(){
var div=document.getElementById('ok')
클리어 인터벌(타이머)
타이머=setInterval(함수(){
ok.style.width=ok.offsetWidth-1+'px' ;//이론적으로는 너비가 감소해야 하지만 실제로는 증가하고 있습니다. 그 이유는 스타일 시트의 테두리 속성을 제거하면 해결될 수 있기 때문입니다. .
},20)
}
</script>
<스타일 유형="텍스트/css">
* {여백: 0;패딩:0}
본문 {글꼴 크기: 14px; 줄 높이: 24px; 여백: 0px; 패딩: 0px;}
#ok{너비:800px;높이: 200px;배경색:어두운녹색;경계: 1px 빨간색 단색 }
</style>
</head>
<본문>
<div id="확인"></div>
댓글 주목, 이런 현상은 왜 발생하는 걸까요? 실제로 ok.style.width는 div의 너비를 지정하고 offsetwidth는 테두리 너비를 포함한 실제 너비를 참조하기 때문에 테두리 때문에 발생합니다. 따라서 오른쪽의 수식으로 얻은 너비 값은 실제로 왼쪽의 너비보다 1픽셀 더 큽니다. 실제로 1픽셀을 빼는 목적을 달성하려면 매번 3픽셀을 빼야 합니다. 또는 오른쪽에parseInt(div.style.width)를 사용하되 다음과 같이 div를 수정합니다.
다음과 같이 코드 코드를 복사합니다.
<div id="ok" style="width:200px:></div>
궁극적인 해결책: currentstyle 또는 getcomputedstyle을 사용하여 속성을 가져옵니다.