jQuery метод .outerHeight()

Определение и применение

jQuery метод .outerHeight() получает текущее вычисленное значение внешней высоты (включая внутренние отступы - padding, границы - border и при необходимости внешние отступы - margin) для первого элемента в наборе совпавших элементов, или устанавливает внешнюю высоту каждого соответствующего элемента.

Наглядное отображение использования jQuery методов .outerHeight() и .outerWidth().

Для получения текущего значения вычисленного значения внешней ширины элемента (включая внутренние отступы, границы и при необходимости внешние отступы) для первого элемента в наборе совпавших элементов, или установить внешнюю ширину каждого соответствующего элемента вы можете воспользоваться методом .outerWidth().

Если метод .outerHeight() вызывается на пустом наборе элементов, то возвращаемое значение будет undefined (до версии jQuery 3.0 значение null).

Этот метод не применяется к таким объектам как window, или document. Для этих целей используйте метод .height().

Метод .outerHeight() может использоваться на элементах таблицы, но может дать неожиданный результат, когда используется CSS свойство border-collapse со значением collapse (границы таблицы объединяются в одну, когда это возможно).

jQuery метод .outerHeight() не гарантирует точность в том случае, когда элемент, или его родитель скрыт. Чтобы получить точное значение, убедитесь, что элемент является видимым перед использованием метода. jQuery будет пытаться временно показать, а затем снова скрыть элемент для того, чтобы измерить его размеры, но в этом случае метод не является надежным, это может влиять на производительность страницы. Подобная функция измерения может быть удалена в следующей версии библиотеки jQuery.

jQuery синтаксис:

Получение значения:
Синтаксис 1.2.6:
$( selector ).outerHeight() 
$( selector ).outerHeight( includeMargin ) // получение значения с внешними отступами

includeMargin - Boolean

Установка значений:
Синтаксис 1.8.0:
$( selector ).outerHeight( value ) 
$( selector ).outerHeight(function( index, currentValue )) 

value - String (значение в произвольных единицах измерения), или Integer (значение в пикселях)
index - Integer
currentValue - Number.

Добавлен в версии jQuery

1.2.6 (синтаксис расширен в 1.8.0)

Значения параметров

Параметр	Описание
includeMargin	Логическое значение, которое указывает, следует ли включать внешние отступы элемента в расчет. Значение по умолчанию false (внешние отступы не включаются в расчет).
value	Параметр определяет значение внешней высоты, которое будет установлено. Допускается указывать любые единицы измерения CSS, либо указывать только числовое значение без единиц измерения, в этом случае значение будет установлено в пикселях. Обратите внимание, что свойство height не включает в себя внутренние отступы, границу, или внешние отступы, если используется CSS свойство box-sizing со значением content-box (значение по умолчанию).
function(index, currentValue)	Определяет функцию, которая возвращает новое значение внешней высоты, которое будет установлено выбранным элементам. Внутри функции this ссылается на текущий элемент в наборе. index - возвращает индекс элемента в наборе. currentValue - текущее значение внешней высоты элемента.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .outerHeight() (возвращение значения)</title>
		<style>.first {
	width: 100px; /* ширина элемента */
	height: 100px; /* высота элемента */
	padding: 10px; /* внутренние отступы */
	margin: 10px; /* внешние отступы */
	border: 5px solid green; /* сплошная граница размером 5 пикселей зеленого цвета */
	box-sizing: content-box; /* значения ширины и высоты не включают в себя границы (border) и внутренние отступы (padding), а только содержание элемента */
}
.second {
	width: 100px; /* ширина элемента */
	height: 100px; /* высота элемента */
	padding: 10px; /* внутренние отступы */
	margin: 10px; /* внешние отступы */
	border: 5px solid red; /* сплошная граница размером 5 пикселей красного цвета */
	box-sizing: border-box; /* значения ширины и высоты включают в себя содержание элемента, границы (border) и внутренние отступы (padding) */
}
</style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  var outerHeightFirst = $( ".first" ).outerHeight(); // инициализируем переменную со значением внешней высоты элемента с классом first
	  var outerHeightFirstWithMargin = $( ".first" ).outerHeight( true ); // инициализируем переменную со значением внешней высоты элемента с классом first, включающую внешние отступы
	  var outerHeightSecond = $( ".second" ).outerHeight(); // инициализируем переменную со значением внешней высоты элемента с классом second
	  var outerHeightSecondWithMargin = $( ".second" ).outerHeight( true ); // инициализируем переменную со значением внешней высоты элемента с классом second, включающую внешние отступы
	  $( ".first" ).text( "content-box " + outerHeightFirst + "/" + outerHeightFirstWithMargin ); // добавляем текстовое содержимое элементу с классом first
	  $( ".second" ).text( "border-box " + outerHeightSecond + "/" + outerHeightSecondWithMargin ); // добавляем текстовое содержимое элементу с классом second
	});
		</script>
	</head>
	<body>
		<div class = "first"></div>
		<div class = "second"></div>
	</body>
</html>

В этом примере мы при загрузке документа с использованием jQuery метода .outerHeight() инициализируем четыре переменные, которые содержат значения внешней высоты элементов с классом first и с классом second как с внешними отступами (margin), так и без них. Обратите внимание, что для того, чтобы получить значение с внешними отступами элемента необходимо дополнительно с методом .outerHeight() передать в качестве параметра логическое значение true.

После этого с использованием метода jQuery .text() добавляем значения переменных внутри элементов с классом first и с классом second. Обратите внимание, что свойство height не включает в себя внутренние отступы, границу, или внешние отступы, если используется CSS свойство box-sizing css3 со значением content-box (значение по умолчанию).

Результат нашего примера:

Пример использования jQuery метода .outerHeight() (возвращение значения)

Рассмотрим следующий пример в котором мы как получим, так и установим значение внешней высоты:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .outerHeight() (установка значения)</title>
		<style>.first {
	width: 100px; /* ширина элемента */
	height: 100px; /* высота элемента */
	padding: 10px; /* внутренние отступы */
	margin: 10px; /* внешние отступы */
	border: 5px solid green; /* сплошная граница размером 5 пикселей зеленого цвета */
	box-sizing: content-box; /* значения ширины и высоты не включают в себя границы (border) и внутренние отступы (padding), а только содержание элемента */
}
.second {
	width: 100px; /* ширина элемента */
	height: 100px; /* высота элемента */
	padding: 10px; /* внутренние отступы */
	margin: 10px; /* внешние отступы */
	border: 5px solid red; /* сплошная граница размером 5 пикселей красного цвета */
	box-sizing: border-box; /* значения ширины и высоты включают в себя содержание элемента, границы (border) и внутренние отступы (padding) */
}
</style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  var outerHeightFirst = $( ".first" ).outerHeight(); // инициализируем переменную со значением внешней высоты элемента с классом first
	  var outerHeightSecond = $( ".second" ).outerHeight(); // инициализируем переменную со значением внешней высоты элемента с классом second
	  $( ".first" ).text( "content-box " + outerHeightFirst); // добавляем текстовое содержимое элементу с классом first
	  $( ".second" ).text( "border-box " + outerHeightSecond); // добавляем текстовое содержимое элементу с классом second
	  
	  $( "button" ).click(function(){
	    $( ".first" ).outerHeight(80); // устанавливаем новое значение внешней высоты элемента с классом first
	    $( ".second" ).outerHeight(80); // устанавливаем новое значение внешней высоты элемента с классом second
	    outerHeightFirst = $( ".first" ).outerHeight(); // присваиваем переменной текущее значение внешней высоты элементы с классом first
	    outerHeightSecond = $( ".second" ).outerHeight(); // присваиваем переменной текущее значение внешней высоты элементы с классом second
	    $(".first").text( "content-box " + outerHeightFirst); // добавляем новое текстовое содержимое элементу с классом first
	    $(".second").text( "border-box " + outerHeightSecond); // добавляем новое текстовое содержимое элементу с классом second
	  });
	});
		</script>
	</head>
	<body>
		<div class = "first"></div>
		<div class = "second"></div>
	</body>
</html>

В этом примере по аналогии с предыдущим примером мы при загрузке документа с использованием jQuery метода .outerHeight() инициализируем переменные, которые содержат значения внешней высоты элемента с классом first и с классом second (внешние отступы в расчет не включаются). После этого с использованием метода .text() добавляем эти значения внутри элементов с классом first и с классом second.

Кроме того, мы разместили кнопку, при нажатии на которую, мы устанавливаем внешнюю высоту равную 80 пикселям каждому элементу. При этом зрительно мы получим один и тот же результат независимо от значения свойства box-sizing css3 , но при этом учитывайте, что значение высоты (height) у элементов будет разным.

Результат нашего примера:

Пример использования jQuery метода .outerHeight() (установка значения)

Рассмотрим следующий пример в котором мы передадим в качестве параметра метода .outerHeight() функцию:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .outerHeight() (функция в качестве параметра)</title>
		<style>div {
	display: inline-block; /* блочно-строчные элементы */
	width: 10px; /* ширина элемента */
	height: 50px; /* высота элемента */
	padding: 10px; /* внутренние отступы */
	margin: 10px; /* внешние отступы */
	border: 1px solid orange; /* сплошная граница размером 1 пиксель оранжевого цвета */
	transition: 2s; /* переходный эффект составляет 2 секунды */
}
</style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "button" ).click(function(){
	    var x = $( "div" ).outerHeight(); // инициализируем переменную, содержащую внешнюю высоту первого элемента <div>
	    $( "div" ).outerHeight(function(index, currentOuterHeight){
	      x += 30; // увеличиваем значение переменной x
	      return currentOuterHeight += x;  // возвращаем новое значение внешней высоты элемента с текущим индексом
	    });
	  });
	});
		</script>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

В этом примере мы при нажатии на кнопку передаем методу .outerHeight() функцию, которая возвращает новое значение внешней высоты и устанавливает её выбранным элементам в зависимости от их индекса. Перед каждой установкой значения, мы увеличиваем значение переменной на 30 и прибавляем его к значению внешней высоты элемента.

Результат нашего примера:

Пример использования jQuery метода .outerHeight() (функция в качестве параметра)

jQuery DOM методы