JavaScript和jQuery选择器产生不同的结果？

Question

以下2个代码段会产生截然不同的结果：

这个按预期工作：它每秒将进度条值（宽度）增加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可以帮助你。