АКЦИЯ: бесплатные месячные курсы по созданию сайтов
на выбор: верстка, JavaScript, PHP или фреймворки. Сегодня последний день для записи! Жми!
34 of 119 menu
НОВИНКА: Практика на Реальных Проектах и Работы в Портфолио. Бесплатный курс! Жми для записи!

Метод innerWidth

Метод innerWidth позволяет получать и изменять ширину элемента с учетом его внутренних отступов. Важно помнить, что мы будем получать 'вычисленное значение' ширины (англ. computed width). Ошибки в вычислении могут также возникать, если пользователь меняет размеры страницы, а также, если элемент или его родитель скрыты. Значение ширины не учитывает толщину границы элемента.

Синтаксис

Получить ширину элемента. В некоторых случаях полученные значения могут быть дробными:

$(селектор).innerWidth();

Чтобы изменить ширину элемента - можно передать просто число (к примеру 400), тогда единицы измерения будут пиксели, либо строку, с указанием единиц измерения (к примеру '10em'):

$(селектор).innerWidth(новое значение);

Также мы можем применить заданную функцию к каждому элементу в наборе. При этом первым параметром функция получит номер элемента в наборе, а вторым параметром - текущее значение заданной ширины для конкретного элемента. Значение this внутри функции будет указывать на текущий элемент. Значение ширины элемента поменяется на то, которое вернет функция:

$(селектор).innerWidth(function(номер в наборе, текущее значение ширины));

Пример

Давайте для сравнения выведем информацию о ширине абзаца #test, полученной методами width и innerWidth:

<p id="test">text</p> <p id="out1"></p> <p id="out2"></p> p { margin: 10px; padding: 5px; border: 2px solid blue; } let w1 = $('#test').width(); let w2 = $('#test').innerWidth(); $('#out1').text(w1); $('#out2').text(w2);

Мы увидим разницу в 10px, что является суммой наших левого и правого внутренних отступов.

Смотрите также

  • метод width,
    который позволяет получать и изменять ширину элемента
  • метод outerWidth,
    который позволяет получать и изменять ширину элемента, учитывая его отступы и границу
enru