Larghezza totale dell'elemento (inclusi imbottitura e bordo) in jQuery

Come nel soggetto, come si può ottenere la larghezza totale di un elemento, inclusi il suo bordo e la sua imbottitura, usando jQuery? Ho il plug-in di dimensioni jQuery e in esecuzione .width()sul mio 760px-wide, 10px paddingDIV restituisce 760.

Forse sto facendo qualcosa di sbagliato, ma se il mio elemento si manifesta come 780 pixels widee Firebug mi dice che c'è 10px padding, ma chiamare .width()dà solo 760, mi farebbe fatica a vedere come.

Grazie per eventuali suggerimenti.

[Aggiornare]

La risposta originale è stata scritta prima di jQuery 1.3 e le funzioni esistenti al momento non erano adeguate da sole per calcolare l'intera larghezza.

Ora, come afferma correttamente JP , jQuery ha le funzioni outerWidth e outerHeight che includono bordere paddingper impostazione predefinita, e anche marginse il primo argomento della funzione ètrue

[Risposta originale]

Il widthmetodo non richiede più il dimensionsplug-in, poiché è stato aggiunto ajQuery Core

Quello che devi fare è ottenere i valori di riempimento, margine e larghezza del bordo di quel div specifico e aggiungerli al risultato del widthmetodo

Qualcosa come questo:

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

Dividi in più righe per renderlo più leggibile

In questo modo otterrai sempre il valore calcolato corretto, anche se cambi i valori di riempimento o margine dal css

Qualcun altro che si imbatte in questa risposta dovrebbe notare che jQuery ora (> = 1.3) ha outerHeight/ outerWidthfunzioni per recuperare la larghezza incluso il riempimento / i bordi, ad es.

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

Per includere anche il margine, passa semplicemente true:

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

sembra outerWidth è rotto nell'ultima versione di jquery.

La discrepanza si verifica quando

il div esterno è flottato, il div interno ha la larghezza impostata (minore del div esterno) il div interno ha style = "margin: auto"

Solo per semplicità ho incapsulato la grande risposta di Andreas Grech sopra in alcune funzioni. Per chi desidera un po 'di felicità taglia e incolla.

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

gli stessi browser potrebbero restituire una stringa per la larghezza del bordo, in questo parInIn restituirà NaN, quindi assicurati di analizzare il valore in modo corretto.

        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>