Jaka jest różnica między szerokością, wewnętrzną i zewnętrzną szerokością, wysokością, wewnętrzną wysokością i zewnętrzną wysokością w jQuery

125

Napisałem kilka przykładów, aby zobaczyć, jaka jest różnica, ale pokazują mi te same wyniki dla szerokości i wysokości.

<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>

W tym przykładzie widać, że dają takie same wyniki. Jeśli ktoś wie, jaka jest różnica, proszę o podanie właściwej odpowiedzi.

Dzięki.

javascript jquery css dom styles zajke
źródło
8
Czy spojrzałeś na dokumentację jQuery?
Brad M
1
Spróbuj dodać dopełnienie, obramowanie i marginesy do swojego <div>i zobacz, czy to daje inne rezultaty;)
Niet the Dark Absol
4
api.jquery.com/category/dimensions Ta strona opisuje je wszystkie, a po kliknięciu każdego z nich podaje jeszcze więcej informacji.
JClaspill,
Szukałem w google, ale żadna z odpowiedzi nie spełnia moich oczekiwań.
zajke
@BradM - No man. Ale wyniki dla „różnicy między szerokością, wewnętrzną szerokością, zewnętrzną szerokością jquery” nic mi nie mówi.
zajke

Odpowiedzi:

16

Jak wspomniano w komentarzu, dokumentacja dokładnie wyjaśnia, jakie są różnice. Ale podsumowując:

  • innerWidth / innerHeight - obejmuje dopełnienie, ale bez obramowania
  • externalWidth / externalHeight - obejmuje dopełnienie, obramowanie i opcjonalnie margines
  • wysokość / szerokość - wysokość elementu (bez dopełnienia, bez marginesu, bez obramowania)
Domyślna
źródło
4

  • width = pobierz szerokość,

  • innerWidth = pobierz szerokość + dopełnienie,

  • externalWidth = pobierz szerokość + dopełnienie + obramowanie i opcjonalnie margines

Jeśli chcesz przetestować, dodaj dopełnienie, marginesy, obramowania do swoich klas .test i spróbuj ponownie.

Przeczytaj także dokumentację jQuery ... Jest tam prawie wszystko, czego potrzebujesz

Chris G-Jones
źródło
3

Wydaje się konieczne, aby opowiedzieć o przypisaniach wartości i porównać znaczenie parametru „width” w jq: (załóżmy, że nowa_wartość jest zdefiniowana w jednostce px)

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

Te trzy instrukcje nie dają tego samego efektu: ponieważ pierwsza instrukcja jquery definiuje wewnętrzną szerokość elementu, a nie „szerokość”. To jest trudne.

Aby uzyskać ten sam efekt, musisz obliczyć dopełnienia wcześniej (zakładając, że var to pady), właściwą instrukcją dla jquery, aby uzyskać ten sam wynik, co czysty js (lub parametr css 'width'), jest:

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

Możemy również zauważyć, że dla:

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

w1 to wewnętrzna szerokość, podczas gdy w2 to szerokość (znaczenie atrybutu css) Różnica, która nie jest udokumentowana w dokumentacji JQ API.

Z poważaniem

Potrójnie

Uwaga: moim zdaniem można to uznać za błąd JQ 1.12.4 sposobem na wyjście powinno być definitywne wprowadzenie listy akceptowanych parametrów dla .css („parametr”, wartość), ponieważ za „parametrami” kryją się różne znaczenia zaakceptowane, które budzą zainteresowanie, ale muszą być zawsze jasne. W tym przypadku: „innerwidth” nie będzie oznaczać tego samego, co „width”. Ślad tego problemu możemy znaleźć w dokumentacji .width (wartość) ze zdaniem: "Zauważ, że w nowoczesnych przeglądarkach właściwość szerokości CSS nie zawiera dopełnienia"

user161546
źródło
Dodany skręt: .css('width')jest taki sam jak .outerWidth()(to znaczy obejmuje obramowanie, a także wypełnienie) kiedy box-sizing: border-box;.
Bob Stein
0

Zgadzam się ze wszystkimi odpowiedziami podanymi powyżej. Samo dodanie w zakresie perspektyw okna lub przeglądarki innerWidth/ innerheightobejmuje tylko obszar zawartości okna, nic poza tym

outerWidth/ outerHeight obejmuje obszar zawartości systemu Windows, a oprócz tego obejmuje również takie elementy, jak paski narzędzi, paski przewijania itp., a te wartości będą zawsze równe lub większe niż wartości innerWidth / innerHeight.

Mam nadzieję, że pomoże to bardziej ...

Alok Ranjan
źródło
0

To, co teraz widzę, innerWidthobejmuje całą zawartość

To znaczy, jeśli okno jest, 900pxa zawartość jest 1200px(i jest zwój)

  • innerWidth daje mi 1200px
  • outerWidth daje mi 900px

Całkowicie nieoczekiwane w moich oczach

* W moim przypadku zawartość jest zawarta w pliku <iframe>

GWorking
źródło