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

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

    $(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 });   .test { width: 200px; height: 150px; background: black; }    

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

Благодарю.

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

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

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

jQuery – Размеры

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

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

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

  • innerWidth = get width + padding,

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

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

Также читайте в документах jQuery … Все, что вам нужно,

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

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

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

Чтобы получить тот же эффект, вы должны рассчитать paddings раньше (предположим, что 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 не включает прописку»,

Interesting Posts

String valueOf против конкатенации с пустой строкой

Расчет расстояния между двумя широтами и долготами GeoCoordinates

Включить удаленное соединение с MySQL: ERROR 1045 (28000): доступ запрещен для пользователя

Установка рабочего каталога / диска по умолчанию в оболочке Emacs в Windows

Файл с измененным прослушивателем в Java

Алгоритм наилучшего соответствия

Объединение Data.frame и выбор значений, которые являются общими в 2 Data.frames

Создание доступных компонентов пользовательского интерфейса в Delphi

Группирование столбцов данных по общим значениям

Android-приложение не установлено. Уже установлен существующий пакет с тем же именем с конфликтующей сигнатурой

Обозначение памяти char * и char

Почему этот файл Excel продолжает запрашивать сохранение?

Почему Catch (Exception) почти всегда является плохой идеей?

Должен ли я создавать резервные копии скрытого раздела в 100 МБ при создании образа диска с помощью Clonezilla?

Комбинация списка <Список >

Давайте будем гением компьютера.