Давайте посмотрим на процедуру ниже
Скопируйте код кода следующим образом:
<тип сценария="текст/javascript">
вар таймер
функция stopMove(){
ClearInterval (таймер)
}
функция startMove(){
var div=document.getElementById('ок')
ClearInterval (таймер)
таймер = setInterval (функция () {
ok.style.width=ok.offsetWidth-1+'px' ;//Теоретически ширина должна уменьшаться, но на самом деле она увеличивается. Причина в атрибуте border в таблице стилей, которую можно решить, удалив его. .
},20)
}
</скрипт>
<style type="text/css">
* {поле: 0; дополнение: 0}
тело {размер шрифта: 14 пикселей; высота строки: 24 пикселя; поле: 0 пикселей; отступ: 0 пикселей;}
#ok{width:800px;height: 200px;background-color:darkgreen;border: 1px красный сплошной }
</стиль>
</голова>
<тело>
<div id="ok"></div>
Обратите внимание на комментарии, почему происходит такое явление? На самом деле это вызвано границей, поскольку ok.style.width определяет ширину элемента div, а offsetwidth относится к фактической ширине, включая ширину границы. Следовательно, значение ширины, полученное по формуле справа, на самом деле на один пиксель больше, чем значение слева. Решение состоит в том, чтобы каждый раз вычитать 3 пикселя, чтобы фактически вычесть один пиксель. Или используйте parseInt(div.style.width) справа, но измените div следующим образом:
Скопируйте код кода следующим образом:
<div id="ok" style="width:200px:></div>
Окончательное решение: используйте currentstyle или getcomputerstyle для получения свойств.