当前位置：文江博客话题详情

使用 Javascript setTimeout() 增加 Div 宽度

发布于 2024-09-29 06:39:45 字数 41 浏览 4 评论 0原文

我们如何使用 setTimeout() 增加或减少 DIV 的宽度？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

云淡风轻 2024-10-06 06:39:45

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

如果您想首先通过获取当前宽度来增加或减少，那么您可以查看 clientWidth()：

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

或使用 jQuery 的 width():

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

jQuery 变得非常流行，甚至被大公司使用，所以你可以考虑使用它。

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

a related blog and spec:

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

If you want to increase or decrease first by getting the current width, then you can look into clientWidth():

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

or use jQuery's width():

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

jQuery is becoming very popular and even used by big corporations, so you can consider using it.

回复收藏 0 原文

冷血 2024-10-06 06:39:45

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

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

回复收藏 0 原文

~没有更多了~