jQuery метод .outerHeight()
Определение и применение
jQuery метод .outerHeight() получает текущее вычисленное значение внешней высоты (включая внутренние отступы - padding, границы - border и при необходимости внешние отступы - margin) для первого элемента в наборе совпавших элементов, или устанавливает внешнюю высоту каждого соответствующего элемента.
Наглядное отображение использования jQuery методов .outerHeight() и .outerWidth().
Для получения текущего значения вычисленного значения внешней ширины элемента (включая внутренние отступы, границы и при необходимости внешние отступы) для первого элемента в наборе совпавших элементов, или установить внешнюю ширину каждого соответствующего элемента вы можете воспользоваться методом .outerWidth().
Если метод .outerHeight() вызывается на пустом наборе элементов, то возвращаемое значение будет undefined (до версии jQuery 3.0 значение null).
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 - текущее значение внешней высоты элемента. |
Пример использования
<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 со значением content-box (значение по умолчанию).
Результат нашего примера:
Рассмотрим следующий пример в котором мы как получим, так и установим значение внешней высоты:
<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, но при этом учитывайте, что значение высоты (height) у элементов будет разным.
Пример использования jQuery метода .outerHeight() (установка значения): попробуйте сами
index.html
<button>Клик</button>
<div class="first"></div>
<div class="second"></div>
main.js
$(document).ready(function () {
var outerHeightFirst = $(".first").outerHeight();
var outerHeightSecond = $(".second").outerHeight();
$(".first").text("content-box " + outerHeightFirst);
$(".second").text("border-box " + outerHeightSecond);
$("button").click(function () {
$(".first").outerHeight(80);
$(".second").outerHeight(80);
outerHeightFirst = $(".first").outerHeight();
outerHeightSecond = $(".second").outerHeight();
$(".first").text("content-box " + outerHeightFirst);
$(".second").text("border-box " + outerHeightSecond);
});
});
style.css
.first{
width: 100px;
height:100px;
padding:10px;
margin:10px;
border:5px solid green;
box-sizing: content-box;
}
.second{
width: 100px;
height:100px;
padding:10px;
margin:10px;
border:5px solid red;
box-sizing: border-box;
}
Результат нашего примера:
Рассмотрим следующий пример в котором мы передадим в качестве параметра метода .outerHeight() функцию:
<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() (функция в качестве параметра): попробуйте сами
index.html
<button>Клик</button><br />
<div></div>
<div></div>
<div></div>
main.js
$(document).ready(function () {
$("button").click(function () {
var x = $("div").outerHeight();
$("div").outerHeight(function (index, currentOuterHeight) {
x += 30;
return (currentOuterHeight += x);
});
});
});
style.css
div{
display:inline-block;
width: 10px;
height:50px;
padding:10px;
margin:10px;
border:1px solid orange;
transition: 2s;
}
Результат нашего примера:
