Verwirrt über Übung jQuery Höhe mit() Methode

Der Code, der mich verwirrt, ist die Übung auf Seite 347 (Ausschneiden, Kopieren, Einfügen): http://javascriptbook.com/code/c07/Verwirrt über Übung jQuery Höhe mit() Methode

So ist der Absatz, der auf die ungeordnete Liste angehängt worden ist, gibt die Höhe des Div mit einer ID = "Seite".

Für mich (mit Chrome), gibt es 424px zurück. Wenn ich jedoch die Höhen der Inhaltsbereiche der einzelnen Elemente addiere, kann ich nicht zu dieser Nummer kommen. Ich bekomme: 75px + 36px + 50px + 50px + 50px + 50px + 24px = 335px

Wo bin ich falsch gelaufen?

Quelle

2016-05-18 Madeleine Smith

Veröffentlichen Sie Ihren Code hier, nicht nur als Link zu einer Website. – Barmar

Habe nicht den Code angeschaut, aber ich vermute, dass es mit Padding und/oder Rahmen zu tun hat. – Barmar

.height() gibt die Höhe des Inhalts ohne Rand, Padding oder Ränder des Elements zurück. Die Ränder der untergeordneten Elemente, die Abstände und die Umrandungen ergeben jedoch die Höhe des Elements. So würde .height() des Elements #page den Wert zurückgeben, der allen Kinderhöhen + ihren Rändern, Paddings und Rändern entspricht.

Quelle

2016-05-18 20:30:34 Uzbekjon

Wenn Sie die inneren Elemente manuell vermessen haben, haben Sie ihren Rand/Abstand in Ihre Berechnung einbezogen?

Zum Beispiel, wenn Sie 5 Elemente mit einer Höhe von jeweils 10px und keinen Rand oder Polsterung haben, wäre die Höhe des Containers 50px.

Wenn die 5 Elemente jedoch auch einen Rand von 5px haben, wäre die Höhe des Containers 100px.

Quelle

2016-05-18 20:31:44 Puppetmupp

Nein, bei der Berechnung der Höhen der einzelnen Elemente habe ich das Padding/den Rand/den Rand nicht berücksichtigt - ich verstehe aber, woher du kommst. Aber selbst wenn ich das Padding/border/margin der einzelnen Elemente berücksichtige, kann ich nicht zu 424px kommen. Ich bekomme jetzt 125 + 36+ 62+ 62+ 62+ 62 +44 = 453 px, nicht 424px. Ich verwende Googles DevTools, um meine Ergebnisse zu erhalten. Allerdings gibt sogar DevTools die Höhe des Divs als 516px nicht 424px ... –

Wenn Sie Ihre Frage mit dem relevanten HTML, CSS und dem JS, das Sie versuchen, zu aktualisieren, wäre es viel einfacher, das Verhalten zu erklären. – Puppetmupp

Die beste Methode, um die gesamte Höhe eines Elements einschließlich der Ränder, Abstände und Ränder zu messen, ist die Verwendung von '.outerHeight (true)'. Ich habe einen kleinen [fiddle] (https://jsfiddle.net/42dv46av/3/) erstellt, um zu veranschaulichen, wie sich die gesamte Höhe des inneren Elements auf die innere Höhe des Containers auswirkt (zurückgegeben von '.height()'). – Puppetmupp

Verwirrt über Übung jQuery Höhe mit() Methode

Antwort

Verwandte Themen