Gesamtbreite des Elements (einschließlich Polsterung und Rand) in jQuery

Wie kann man wie im Betreff mit jQuery die Gesamtbreite eines Elements einschließlich seines Rahmens und seiner Auffüllung ermitteln? Ich habe die jQuery Dimensionen bekam Plugin, und läuft .width()auf meinem 760px-wide, 10px paddingDIV kehrt 760.

Vielleicht mache ich etwas falsch, aber wenn sich mein Element als manifestiert 780 pixels wideund Firebug mir sagt, dass es 10px paddingdarauf ist, aber ein Anruf .width()nur 760 ergibt, würde ich kaum sehen können, wie.

Vielen Dank für alle Vorschläge.

[Aktualisieren]

Die ursprüngliche Antwort wurde vor jQuery 1.3 geschrieben, und die zu diesem Zeitpunkt vorhandenen Funktionen waren für sich genommen nicht ausreichend, um die gesamte Breite zu berechnen.

Wie JP korrekt angibt, verfügt jQuery nun über die Funktionen OuterWidth und OuterHeight, die standardmäßig das borderund enthalten padding, sowie das marginif-Argument, wenn das erste Argument der Funktion lautettrue

[Ursprüngliche Antwort]

Die widthMethode benötigt das dimensionsPlugin nicht mehr , da es dem hinzugefügt wurdejQuery Core

Was Sie tun müssen, ist, die Werte für Auffüllen, Rand und Randbreite dieses bestimmten Div abzurufen und sie zum Ergebnis der widthMethode hinzuzufügen

Etwas wie das:

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

In mehrere Zeilen aufteilen, um die Lesbarkeit zu verbessern

Auf diese Weise erhalten Sie immer den richtigen berechneten Wert, auch wenn Sie die Auffüll- oder Randwerte aus dem CSS ändern

Jeder andere, der über diese Antwort stolpert, sollte beachten, dass jQuery jetzt (> = 1.3) outerHeight/ outerWidthFunktionen zum Abrufen der Breite einschließlich Auffüllen / Rahmen hat, z

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

Um auch den Rand einzuschließen, übergeben Sie einfach true:

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

Es sieht so aus, als ob OuterWidth in der neuesten Version von jquery kaputt ist.

Die Diskrepanz tritt auf, wenn

Das äußere Div ist schwebend, das innere Div hat die eingestellte Breite (kleiner als das äußere Div), das innere Div hat style = "margin: auto"

Der Einfachheit halber habe ich die großartige Antwort von Andreas Grech oben in einigen Funktionen zusammengefasst. Für diejenigen, die ein bisschen Glück beim Ausschneiden und Einfügen wünschen.

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

Dieselben Browser geben möglicherweise eine Zeichenfolge für die Rahmenbreite zurück. In diesem ParseInt wird NaN zurückgegeben. Stellen Sie daher sicher, dass Sie den Wert richtig auf int analysieren.

        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>