В чем разница между шириной, внутренней шириной и внешней шириной, высотой, внутренним и верхним высотами в jQuery

Я написал несколько примеров, чтобы узнать, в чем разница, но они показывают мне те же результаты для ширины и высоты.

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

В этом примере вы можете видеть, что они выдают одинаковые результаты. Если кто-нибудь знает, в чем разница, пожалуйста, покажите мне подходящий ответ.

Спасибо.

ОТВЕТЫ

Ответ 2

Как упоминалось в комментарии, документация сообщает вам, в чем именно отличия. Но в целом:

  • innerWidth/innerHeight - включает в себя дополнение, но не границу
  • outerWidth/outerHeight - включает в себя отступы, границы и опциональные поля.
  • высота/ширина - высота элемента (без заполнения, без поля, без рамки)

Ответ 3

  • width = получить ширину,

  • innerWidth = get width + padding,

  • outerWidth = get width + padding + border и необязательно поле

Если вы хотите протестировать, добавьте некоторые дополнения, поля, границы ваших классов .test и повторите попытку.

Также читайте в jQuery docs... Все, что вам нужно, там довольно много.

Ответ 4

Кажется нужным рассказать о назначениях значений и сравнить их значение в jq: (предположим, что new_value определено в единицах px)

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

Три команды не дают такого же эффекта: потому что первая команда jquery определяет внутреннюю ширину элемента, а не "ширину". Это сложно.

Чтобы получить тот же эффект, вы должны рассчитать paddings before (предположим, что var - это пэды), правильная команда для jquery для получения того же результата, что и чистый js (или css-параметр "width" ):

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

Можно также отметить, что для:

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

w1 - внутренняя ширина, тогда как w2 - ширина (значение атрибута css) Разница, которая не документирована в документации API JQ.

С наилучшими пожеланиями

втройне

Примечание: на мой взгляд это можно рассматривать как ошибку JQ 1.12.4 путь для выхода должен состоять в том, чтобы окончательно ввести список принятых параметров для .css( "параметр", значение), потому что есть разные значения за "параметрами", которые имеют интерес, но должны быть всегда ясными. Для этого случая: "внутренняя ширина" не будет означать "ширина". Мы можем найти трек этой проблемы в документации .width(value) с предложением: "Обратите внимание, что в современных браузерах свойство ширины CSS не включает дополнение"