使用Javascript增加div宽度setTimeout（）

Question

如何使用setTimeout（）增加或减小DIV的宽度？

Answer 1

setTimeout(function() { document.getElementById('foo').style.width = '300px' }, 
      2000); 

相关博客和规格：

http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/
https://developer.mozilla.org/en/DOM/window.setTimeout

如果你想增加或获取当前宽度先下降，然后你可以看看clientWidth（）：

https://developer.mozilla.org/en/DOM/element.clientWidth

或者使用jQuery的widt H（）：

http://api.jquery.com/width/

jQuery是变得非常受欢迎，甚至被大公司所使用，所以你可以考虑使用它。

Answer 2

<div id="progressbar" style="background-color:green; margin-top: 10px; width:0px; height:10px;"></div> 

<script> 
// set var to rep width of progress bar div 
var dwidth=0; 
// declare global variable for instance of Interval Timer so other funcs can access it. 
IntervalId =0; 
// grow progress bar each second 
IntervalId = setInterval(function() { dwidth +=5; document.getElementById('progressbar').style.width = dwidth+'px';}, 1000); 

// stop progress bar after 10 seconds 
/* in real world an event handler would do this when iframe handling upload script loads response from upload */ 
setTimeout(function() { clearInterval (IntervalId); document.getElementById('progressbar').style.display='none' , 10000); 
</script>