Qual è la differenza tra width, innerWidth e outerWidth, height, innerHeight e outerHeight in jQuery

125

Ho scritto alcuni esempi per vedere qual è la differenza, ma mi mostrano gli stessi risultati per larghezza e altezza.

<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 questo esempio puoi vedere che producono gli stessi risultati. Se qualcuno sa qual è la differenza, per favore mostrami la risposta appropriata.

Grazie.

— zajke
fonte

8

Hai guardato la documentazione di jQuery?

— Brad M

1

Prova ad aggiungere imbottitura, bordo e margine al tuo <div>e vedi se questo dà risultati diversi;)

— Niet the Dark Absol

4

api.jquery.com/category/dimensions Quella pagina li descrive tutti e se fai clic su ognuno fornisce ancora più informazioni.

— JClaspill

Ho cercato su google, ma nessuna delle risposte soddisfa le mie aspettative.

— zajke

@BradM - Nessun uomo. Ma i risultati per "differenza tra width, innerWidth, outerWidth jquery" nulla mi dice in termini essenziali.

— zajke

282

Hai visto questi esempi? Sembra simile alla tua domanda.

Lavorare con larghezze e altezze

inserisci qui la descrizione dell'immagine

jQuery - Dimensioni

jQuery: altezza, larghezza, interno ed esterno

— Zod
fonte

1

migliore risposta di sempre

— Benjamin

Ho appena pubblicato una risposta di seguito poiché in questo momento vedo un comportamento diverso tra le due opzioni che non è dedotto dalla tua descrizione

— GWorking

16

Come accennato in un commento, la documentazione ti dice esattamente quali sono le differenze. Ma in sintesi:

innerWidth / innerHeight: include il riempimento ma non il bordo
outerWidth / outerHeight: include padding, border e facoltativamente margin
altezza / larghezza - altezza dell'elemento (nessun riempimento, nessun margine, nessun bordo)

— Predefinito
fonte

4

larghezza = ottieni la larghezza,
innerWidth = ottieni larghezza + padding,
outerWidth = ottieni larghezza + padding + bordo e facoltativamente il margine

Se vuoi provare aggiungi un po 'di padding, margini, bordi alle tue classi .test e riprova.

Leggi anche i documenti jQuery ... Tutto ciò di cui hai bisogno è praticamente lì

— Chris G-Jones
fonte

3

Sembra necessario parlare delle assegnazioni dei valori e confrontare il significato del parametro "larghezza" in jq: (supponiamo che new_value sia definito in unità px)

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

Le tre istruzioni non danno lo stesso effetto: perché la prima istruzione jquery definisce la larghezza interna dell'elemento e non la "larghezza". Questo è complicato.

Per ottenere lo stesso effetto devi calcolare i padding prima (supponiamo che var sia pad), l'istruzione giusta per jquery per ottenere lo stesso risultato di js puro (o parametro css 'width') è:

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

Possiamo anche notare che per:

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

w1 è la larghezza interna, mentre w2 è la larghezza (significato dell'attributo CSS) Differenza che non è documentata nella documentazione dell'API JQ.

I migliori saluti

trebly

Nota: a mio parere questo può essere considerato un bug JQ 1.12.4 la via per uscire dovrebbe essere quella di introdurre definitivamente un elenco di parametri accettati per .css ('parametro', valore) perché ci sono vari significati dietro a 'parametri' accettati, che hanno interesse ma devono essere sempre chiari. In questo caso: "larghezza interna" non avrà lo stesso significato di "larghezza". Possiamo trovare una traccia di questo problema nella documentazione di .width (valore) con la frase: "Nota che nei browser moderni, la proprietà di larghezza CSS non include il riempimento"

— user161546
fonte

Torsione aggiunta: .css('width')è la stessa di .outerWidth()(cioè include il bordo e l'imbottitura) quando box-sizing: border-box;.

— Bob Stein

0

D'accordo con tutte le risposte fornite sopra. Solo per aggiungere in termini di finestra o prospettive del browser innerWidth/ innerheightinclude solo l'area del contenuto della finestra, nient'altro, ma

outerWidth/ outerHeight include l'area del contenuto di Windows e in aggiunta a ciò include anche cose come le barre degli strumenti, le barre di scorrimento ecc ... e questi valori saranno sempre uguali o maggiori dei valori di innerWidth / innerHeight.

Spero che aiuti di più ...

— Alok Ranjan
fonte

0

Quello che sto vedendo in questo momento è che innerWidthinclude l'intero contenuto

Questo è, se la finestra è 900pxe il contenuto è 1200px(e c'è una pergamena)

innerWidth mi da 1200px
outerWidth mi da 900px

Totalmente inaspettato ai miei occhi

* Nel mio caso il contenuto è contenuto in un file <iframe>

— GWorking
fonte