Largura total do elemento (incluindo preenchimento e borda) no jQuery

Como no assunto, como obter a largura total de um elemento, incluindo sua borda e preenchimento, usando jQuery? Eu tenho o plugin de dimensões do jQuery, e rodando .width()no meu 760px-wide, 10px paddingretorna DIV 760.

Talvez eu esteja fazendo algo errado, mas se meu elemento se manifestar como 780 pixels widee o Firebug me disser que existe 10px padding, mas ligar .width()apenas dá 760, seria difícil ver como.

Obrigado por todas as sugestões.

[Atualizar]

A resposta original foi escrita antes do jQuery 1.3 e as funções que existiam no momento não eram adequadas por si mesmas para calcular toda a largura.

Agora, como o JP afirma corretamente, o jQuery possui as funções outerWidth e outerHeight, que incluem o bordere paddingpor padrão, e também o marginif, o primeiro argumento da função étrue

[Resposta original]

O widthmétodo não requer mais o dimensionsplug - in, porque ele foi adicionado aojQuery Core

O que você precisa fazer é obter os valores de preenchimento, margem e largura da borda dessa div específica e adicioná-los ao resultado do widthmétodo

Algo assim:

var theDiv = $("#theDiv");
var totalWidth = theDiv.width();
totalWidth += parseInt(theDiv.css("padding-left"), 10) + parseInt(theDiv.css("padding-right"), 10); //Total Padding Width
totalWidth += parseInt(theDiv.css("margin-left"), 10) + parseInt(theDiv.css("margin-right"), 10); //Total Margin Width
totalWidth += parseInt(theDiv.css("borderLeftWidth"), 10) + parseInt(theDiv.css("borderRightWidth"), 10); //Total Border Width

Divida em várias linhas para torná-lo mais legível

Dessa forma, você sempre obterá o valor calculado correto, mesmo se alterar os valores de preenchimento ou margem do css

Qualquer pessoa que tropeçar nessa resposta deve observar que o jQuery agora (> = 1.3) tem outerHeight/ outerWidthfunções para recuperar a largura, incluindo preenchimento / bordas, por exemplo

$(elem).outerWidth(); // Returns the width + padding + borders

Para incluir a margem também, basta passar true:

$(elem).outerWidth( true ); // Returns the width + padding + borders + margins

parece que outerWidth está quebrado na versão mais recente do jquery.

A discrepância acontece quando

a div externa é flutuada, a div interna tem a largura definida (menor que a div externa) a div interna possui style = "margin: auto"

Por simplicidade, encapsulei a grande resposta de Andreas Grech acima em algumas funções. Para aqueles que querem um pouco de felicidade, recorte e cole.

function getTotalWidthOfObject(object) {

    if(object == null || object.length == 0) {
        return 0;
    }

    var value       = object.width();
    value           += parseInt(object.css("padding-left"), 10) + parseInt(object.css("padding-right"), 10); //Total Padding Width
    value           += parseInt(object.css("margin-left"), 10) + parseInt(object.css("margin-right"), 10); //Total Margin Width
    value           += parseInt(object.css("borderLeftWidth"), 10) + parseInt(object.css("borderRightWidth"), 10); //Total Border Width
    return value;
}

function  getTotalHeightOfObject(object) {

    if(object == null || object.length == 0) {
        return 0;
    }

    var value       = object.height();
    value           += parseInt(object.css("padding-top"), 10) + parseInt(object.css("padding-bottom"), 10); //Total Padding Width
    value           += parseInt(object.css("margin-top"), 10) + parseInt(object.css("margin-bottom"), 10); //Total Margin Width
    value           += parseInt(object.css("borderTopWidth"), 10) + parseInt(object.css("borderBottomWidth"), 10); //Total Border Width
    return value;
}

os mesmos navegadores podem retornar string para a largura da borda; nesse parseInt retornará NaN, portanto, certifique-se de analisar o valor para int corretamente.

        var getInt = function (string) {
            if (typeof string == "undefined" || string == "")
                return 0;
            var tempInt = parseInt(string);

            if (!(tempInt <= 0 || tempInt > 0))
                return 0;
            return tempInt;
        }

        var liWidth = $(this).width();
        liWidth += getInt($(this).css("padding-left"));
        liWidth += getInt($(this).css("padding-right"));
        liWidth += getInt($(this).css("border-left-width"));
        liWidth += getInt($(this).css("border-right-width"));

$(document).ready(function(){     
$("div.width").append($("div.width").width()+" px");
$("div.innerWidth").append($("div.innerWidth").innerWidth()+" px");   
$("div.outerWidth").append($("div.outerWidth").outerWidth()+" px");         
});


<div class="width">Width of this div container without including padding is: </div>  
<div class="innerWidth">width of this div container including padding is: </div> 
<div class="outerWidth">width of this div container including padding and margin is:     </div>