В чем разница между width, innerWidth и outerWidth, height, innerHeight и outerHeight в jQuery

125

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

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

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

Спасибо.

javascript jquery css dom styles zajke
источник
8
Вы смотрели документацию jQuery?
Brad M
1
Попробуйте добавить к вашему <div>
отступу, рамке
4
api.jquery.com/category/dimensions Эта страница описывает их все, и если вы щелкнете по каждой из них, вы получите еще больше информации.
JClaspill
Я искал в Google, но ни один из ответов не оправдал моих ожиданий.
zajke
@BradM - Нет человека. Но результаты для "разница между шириной, внутренней шириной, внешней шириной jquery" ничего не говорят мне по существу.
zajke

Ответы:

282

Вы видели эти примеры? Похоже на ваш вопрос.

Работа с шириной и высотой

введите описание изображения здесь

jQuery - Размеры

jQuery: высота, ширина, внутренний и внешний

Зод
источник
1
лучший ответ когда-либо
Benjamin
Я только что опубликовал ответ ниже, так как прямо сейчас я вижу различное поведение между двумя вариантами, которое не указано в вашем описании
GWorking
16

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

  • innerWidth / innerHeight - включает отступы, но не границу
  • outerWidth / outerHeight - включает отступы, границу и, возможно, маржу
  • height / width - высота элемента (без отступов, без полей, без рамки)
По умолчанию
источник
4

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

  • innerWidth = получить ширину + отступ,

  • outerWidth = получить ширину + отступ + границу и, возможно, поле

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

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

Крис Джи-Джонс
источник
3

Представляется необходимым рассказать о присвоении значений и сравнить значение параметра "ширина" в jq: (предположим, что new_value определено в пикселях)

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

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

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

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

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

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

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

С уважением

втройне

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

user161546
источник
Добавленный поворот: .css('width')такой же, как .outerWidth()(то есть включает границу, а также отступы) when box-sizing: border-box;.
Боб Стейн
0

Согласитесь со всеми приведенными выше ответами. Просто чтобы добавить с точки зрения окна или перспективы браузера, innerWidth/ innerheightвключает только область содержимого окна, ничего больше, кроме

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

Надеюсь, это поможет больше ...

Алок Ранджан
источник
0

Что я вижу прямо сейчас, так это то, что innerWidthвключает в себя весь контент

Это если окно есть 900pxи контент есть 1200px(и есть свиток)

  • innerWidth дает мне 1200px
  • outerWidth дает мне 900px

Совершенно неожиданно в моих глазах

* В моем случае контент содержится в <iframe>

GWorking
источник