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

164

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.

tags2k
quelle

Antworten:

216

[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

Andreas Grech
quelle
3
Im Allgemeinen würde ich jQuery lieber glauben, als die Berechnung selbst durchzuführen. Das Problem ist, dass die width () - Funktion nicht genau angibt, was sie im Fall von "box-sizing: border-box" tut. Ich habe es gerade getestet und es gibt die innere Breite ohne Polsterung usw. zurück. Dies kann korrekt sein oder auch nicht. Unterschiedliche Menschen können unterschiedliche Dinge erwarten. Das obige Codebeispiel funktioniert also tatsächlich, ist jedoch möglicherweise nicht der zuverlässigste Weg. Wie in einigen anderen Antworten angegeben, würde ich empfehlen, stattdessen die Funktion OuterWidth () zu verwenden. Es verspricht zumindest, was es in der Dokumentation soll.
Jan Zich
4
Die OuterWidth / OuterHeight-Funktion war nicht vorhanden, als ich diese Antwort schrieb.
Andreas Grech
Nur ein kurzer Kommentar zu meinem alten Code, falls ihn noch jemand verwendet. Das parseInts kann in den +Operator geändert werden, um den Code prägnanter zu gestalten. Also, parseInt(theDiv.css("padding-left"), 10)könnte an +theDiv.css("padding-left")etc ...
Andreas Grech
182

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
James
quelle
3
Ich habe keine Bearbeitungsfunktion, aber ich würde den ersten Kommentar ändern in: // Gibt die Breite + Polsterung + Ränder zurück und den zweiten Kommentar in // Gibt die Breite + Polsterung + Ränder + Ränder zurück
CtrlDot
2

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"

Booker
quelle
2

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;
}
Bladnman
quelle
0

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"));
Cherven
quelle
0
$(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>
user1798002
quelle
Vielen Dank für Ihre Antwort! Bitte lesen Sie die FAQ zur Eigenwerbung sorgfältig durch. Beachten Sie auch , dass Sie jedes Mal, wenn Sie auf Ihre eigene Website / Ihr eigenes Produkt verlinken, einen Haftungsausschluss veröffentlichen müssen.
Andrew Barber