js动态获取元素宽度问题

Question

function progress(){
        $('.div5 .progress-bar').animate({width:'+=30px'});
        }
    
    $('.test').click(function(){        
        $('.div5').show();    
         int=setInterval('progress()',1000);    
        
    });
    

这个progress-bar元素宽度每秒增加30px，当宽度到达某个数值就清除这个定时器，如何动态获取这个progress-bar的宽度呢

Answer 1

换个思路，你并不需要获取progress-bar元素的宽度，你只需要知道它要增加多少宽度达到某个数值。

var preAdd = 300,    //要加到300px
    nowAdd = 0;     //已经加了0

function progress(){
    if(nowAdd <= preAdd){
        $('.div5 .progress-bar').animate({width:'+=30px'});
        nowAdd += 30;
    }else{
        clearInterval(int)
    }
}
    
$('.test').click(function(){        
    $('.div5').show();    
     int=setInterval('progress()',1000);    
    
});

Answer 2

$('.div5 .progress-bar').width()获得元素内容区宽度，
$('.div5 .progress-bar').innerWidth()获得border内不包括border的宽度
$('.div5 .progress-bar').outerWidth()获得元素的整体宽度，包括padding和border