<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script type="text/javascript">
function start()
{
var obj = document.getElementById('block');
if(obj.offsetWidth > 0)
{
obj.style.width = (parseInt(obj.offsetWidth) - 3) + "px";
console.log(obj.style.width = (parseInt(obj.offsetWidth) - 3) + "px");
setTimeout(start, 0.2);
}
else
{
console.log(obj.offsetWidth);
}
}
</script>
<style>
#block
{
position: absolute;
width: 400px;
height: 900px;
background: #00F;
right: 0px;
top: 0px;
margin: 0px;
padding: 20px;
}
</style>
</head>
<body>
<div id="block"><button onclick="start()">Старт</button></div>
</body>
</html>
ПО нажатию на кнопку у меня ширина блока каждые 0,2 секунды должна убывать на 3 пикселя, а у меня получается наоборот при нажатии увеличивается - почему?