Селекторы JavaScript и jQuery дают разные результаты?

Question

Следующие 2 фрагмента кода производят очень разные результаты:

Это работает как предполагается: оно увеличивает значение progressbar (ширина) на 5 в секунду.

function doIncrement(increment) { 
    w = parseInt(document.getElementById('internal-progressbar').style.width); 
    document.getElementById('internal-progressbar').style.width = (w + increment) + '%'; 
    if (parseInt(document.getElementById('internal-progressbar').style.width) < 100) 
    { 
     setTimeout(function() { doIncrement(increment) }, 1000); 
    } 
} 

Этот (getelementbyid заменен селекторами jquery) дает совершенно другой результат. Он начинается с увеличения на 5, но затем он увеличивается на 34, а затем еще больше.

function doIncrement(increment) { 
    w = parseInt($('#internal-progressbar').css('width')); 
    $('#internal-progressbar').css('width', (w + increment) + '%'); 
    if (parseInt(document.getElementById('internal-progressbar').style.width) < 100) 
    { 
     setTimeout(function() { doIncrement(increment) }, 1000); 
    } 
} 

В чем причина этой разницы? Я действительно не понимаю.

Вот jsfiddle, который демонстрирует проблему: http://jsfiddle.net/k79Ph/

Answer 1

Проблема заключается в том, что css('width') возвращает абсолютный размер (в пикселях), в то время как style.width является «сырой» значение (в процентах). This thread должны помочь вам.