Размеры
Переварили предыдущий раздел? Хорошо, теперь настал черёд методов, которые работают с размерами элементов.
height()
возвращает высоту элемента за вычетом отступов и границ;
если у нас несколько элементов в выборке, то вернётся первый;
значение, в отличие от метода css("height")
, возвращается без указания единиц измерения
height(height)
устанавливает высоту всех элементов в выборке;
если значение высоты передано без указания единиц измерения, то это будут пиксели px
Методы width()
и width(width)
– ведут себя аналогично методу height()
, но работают с шириной элемента:
width()
возвращает ширину элемента за вычетом отступов и границ; если у нас несколько элементов в выборке, то вернётся первый; значение возвращается без указания единиц измерения
width(height)
устанавливает ширину всех элементов в выборке;
если значение высоты передано без указания единиц измерения, то это будут пиксели px
Методы height()
и width()
не изменяют своего поведения в зависимости от выбранной блочной модели, т.е. они всегда возвращают параметры области внутри margin
, padding
и border
элемента.
innerHeight()
innerWidth()
возвращают, соответственно, высоту и ширину элемента, включая padding
outerHeight()
outerWidth()
возвращают высоту и ширину элемента, включая padding
и border
outerHeight(true)
outerWidth(true)
возвращают высоту и ширину элемента, включая padding
, border
и margin
Для наглядности различий между методами height()
, innerHeight()
и outerHeight()
я создал следующий пример:
В данном примере для центрального элемента c id=block
заданы следующие стили:
#block {
height: 40px;
margin: 40px;
padding: 40px;
border: 40px solid #777;
}
Теперь посмотрим на то, что будет возвращать каждая из перечисленных функций:
alert(`
height() = ${$("#block").height()}
innerHeight() = ${$("#block").innerHeight()}
outerHeight() = ${$("#block").outerHeight()}
outerHeight(true) = ${$("#block").outerHeight(true)}
`);
Чтобы легче понять происходящее, я ещё немного заморочился и переделал несколько картинок из официальной документации в одну полноценную иллюстрацию:

Last updated