[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 border
und enthalten padding
, sowie das margin
if-Argument, wenn das erste Argument der Funktion lautettrue
[Ursprüngliche Antwort]
Die width
Methode benötigt das dimensions
Plugin 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 width
Methode 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
parseInt
s 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 ...Jeder andere, der über diese Antwort stolpert, sollte beachten, dass jQuery jetzt (> = 1.3)
outerHeight
/outerWidth
Funktionen zum Abrufen der Breite einschließlich Auffüllen / Rahmen hat, zUm auch den Rand einzuschließen, übergeben Sie einfach
true
:quelle
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"
quelle
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.
quelle
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.
quelle
quelle