Какова разница между шириной, внутренней шириной и внешней шириной, высотой, внутренней высотой и внешней высотой в 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>

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

спасибо.

4 98
javascript css jquery dom styles

4 ответа:

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

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

enter image description here

jQuery-Dimensions

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

225

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

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

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

  • innerWidth = получить ширину + обивка,

  • outerWidth = get width + padding + border и дополнительно margin

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

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

3

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

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

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

чтобы получить тот же эффект, вы должны рассчитать прокладки раньше (предположим, что 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 ('parameter', value), потому что за "параметрами" принимаются различные значения, которые имеют интерес, но всегда должны быть ясными. В этом случае: 'innerwidth' не будет означать то же самое, что и 'width'. Мы можем найти след этой проблемы в документации .ширина (значение) с предложением : "обратите внимание, что в современных браузерах свойство CSS width не включает заполнение"

1