使用Javascript setTimeout()增加Div宽度

时间:2010-10-28 06:32:26

标签: javascript html settimeout

如何使用setTimeout()??

增加或减少DIV的宽度

2 个答案:

答案 0 :(得分: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的width():

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

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

答案 1 :(得分:0)

<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>