Was ist der Unterschied zwischen Breite, innerer Breite und äußerer Breite, Höhe, innerer Höhe und äußerer Höhe in jQuery?

123

Ich habe ein Beispiel geschrieben, um zu sehen, was der Unterschied ist, aber sie zeigen mir die gleichen Ergebnisse für Breite und Höhe.

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var div = $('.test');
                var width = div.width(); // 200 px
                var innerWidth = div.innerWidth(); // 200px
                var outerWidth = div.outerWidth(); // 200px

                var height = div.height(); // 150 px
                var innerHeight = div.innerHeight(); // 150 px
                var outerHeight = div.outerHeight(); // 150 px
            });

        </script>
        <style type="text/css">
            .test
            {
                width: 200px;
                height: 150px;
                background: black;
            }
        </style>
    </head>
    <body>
        <div class="test"></div>
    </body>
</html>

In diesem Beispiel sehen Sie, dass sie dieselben Ergebnisse ausgeben. Wenn jemand weiß, was der Unterschied ist, zeigen Sie mir bitte die richtige Antwort.

Vielen Dank.

javascript jquery css dom styles Zajke
quelle
8
Haben Sie sich die jQuery-Dokumentation angesehen?
Brad M
1
Versuchen Sie, Polsterung, Rand und Rand zu Ihrem hinzuzufügen <div>, und sehen Sie, ob dies zu unterschiedlichen Ergebnissen führt;)
Niet the Dark Absol
4
api.jquery.com/category/dimensions Diese Seite beschreibt sie alle. Wenn Sie auf die einzelnen Seiten klicken, erhalten Sie noch mehr Informationen.
JClaspill
Ich habe in Google gesucht, aber keine der Antworten entspricht meinen Erwartungen.
Zajke
@BradM - Kein Mann. Aber Ergebnisse für "Unterschied zwischen Breite, innerer Breite, äußerer Breite", sagt mir nichts im Wesentlichen.
Zajke

Antworten:

16

Wie in einem Kommentar erwähnt , zeigt Ihnen die Dokumentation genau die Unterschiede. Aber zusammenfassend:

  • innerWidth / innerHeight - enthält Polsterung, aber keinen Rand
  • OuterWidth / OuterHeight - Enthält Polsterung, Rand und optional Rand
  • Höhe / Breite - Elementhöhe (keine Polsterung, kein Rand, kein Rand)
Standard
quelle
4

  • width = erhalte die Breite,

  • innerWidth = get width + padding,

  • OuterWidth = Breite + Polsterung + Rand und optional den Rand abrufen

Wenn Sie testen möchten, fügen Sie Ihren .test-Klassen Auffüllungen, Ränder und Rahmen hinzu und versuchen Sie es erneut.

Lesen Sie auch in den jQuery-Dokumenten nach ... Alles, was Sie brauchen, ist so ziemlich da

Chris G-Jones
quelle
2

Es scheint notwendig zu sein, über die Wertzuweisungen zu erzählen und über die Bedeutung des Parameters "width" in jq zu vergleichen: (angenommen, dass new_value in px unit definiert ist)

jqElement.css('width',new_value);
jqElement.css({'width: <new_value>;'});
getElementById('element').style.width= new_value;

Die drei Anweisungen haben nicht den gleichen Effekt: Der erste Befehl jquery definiert die innere Breite des Elements und nicht die "Breite". Das ist schwierig.

Um den gleichen Effekt zu erzielen, müssen Sie die Auffüllungen vorher berechnen (vorausgesetzt, var ist Pads). Die richtige Anweisung für jquery, um das gleiche Ergebnis wie bei reinem js (oder CSS-Parameter 'width') zu erhalten, lautet:

jqElement.css('width',new_value+pads);

Wir können das auch beachten für:

var w1 = jqElement.css('width');
var w2 = jqelement.width();

w1 ist die innere Breite, während w2 die Breite ist (CSS-Attributbedeutung). Differenz, die nicht in der JQ-API-Dokumentation dokumentiert ist.

Freundliche Grüße

Dreifach

Hinweis: Meiner Meinung nach kann dies als Fehler angesehen werden. JQ 1.12.4 Der Weg zum Ausstieg sollte darin bestehen, eine Liste akzeptierter Parameter für .css ('Parameter', Wert) endgültig einzuführen, da hinter 'Parameter' verschiedene Bedeutungen stehen. akzeptiert, die Interesse haben, aber immer klar sein müssen. In diesem Fall bedeutet "innere Breite" nicht dasselbe wie "Breite". Wir können eine Spur dieses Problems in der Dokumentation von .width (value) mit dem Satz finden: "Beachten Sie, dass in modernen Browsern die CSS width-Eigenschaft kein Auffüllen enthält."

user161546
quelle
Twist hinzugefügt: .css('width')ist dasselbe wie .outerWidth()(das heißt, es enthält sowohl den Rand als auch die Polsterung), wenn box-sizing: border-box;.
Bob Stein
0

Stimmen Sie allen oben angegebenen Antworten zu. Nur um in Bezug auf Fenster- oder Browser-Perspektiven hinzuzufügeninnerWidth/ innerheight schließt nur Fensterinhaltsbereich ein, sonst nichts, aber

outerWidth/ outerHeight Enthält den Windows-Inhaltsbereich und darüber hinaus auch Symbolleisten, Bildlaufleisten usw. Diese Werte sind immer gleich oder größer als die Werte für innerWidth / innerHeight.

Hoffe es hilft mehr ...

Alok Ranjan
quelle
0

Was ich gerade sehe, ist das innerWidth den gesamten Inhalt enthält

Dies ist, wenn das Fenster ist 900pxund der Inhalt ist 1200px(und es gibt eine Schriftrolle)

  • innerWidth gibt mir 1200px
  • outerWidth gibt mir 900px

Völlig unerwartet in meinen Augen

* In meinem Fall ist der Inhalt in a enthalten <iframe>

GWorking
quelle