- Визначення та застосування
- jQuery синтаксис:
- Запроваджений у версії jQuery
- значення параметрів
- приклад використання
Визначення та застосування
jQuery метод .height () отримує поточний обчислене значення висоти для першого елемента в наборі збіглися елементів, або встановлює висоту кожного відповідного елемента.
Наочне відображення використання jQuery методу .height ().
Звертаю Вашу увагу, що різниця між методами .css ( "Height") і .height () полягає в тому, що останній повертає значення без вказівки одиниць виміру, тоді як перший повертає значення в пікселях (приклад наведено нижче).
jQuery метод .height () рекомендується використовувати, коли необхідно використовувати висоту елемента в математичному розрахунку. Для обчислення ширини елемента використовується метод .width () .
jQuery метод .height () також зможете знайти висоту вікна, або документа:
$ (Document) .height () // повертає висоту HTML документа $ (window) .height () // повертає висоту області перегляду браузера
jQuery метод .height () не гарантує точність в тому випадку, коли елемент, або його батько прихований. Щоб отримати точне значення, переконайтеся, що елемент є видимим перед використанням методу. jQuery буде намагатися тимчасово показати, а потім знову приховати елемент для того, щоб виміряти його розміри, але в цьому випадку метод не є надійним, це може впливати на продуктивність сторінки. Подібна функція вимірювання може бути видалена в наступній версії бібліотеки jQuery.
Метод з версії jQuery 1.8 обчислює і повертає висоту елемента незалежно від того яка модель обчислення ширини і висоти використовується (content-box, або border-box властивості box-sizing 
). Тобто метод буде віднімати кордону і внутрішні відступи. Якщо Вас це не влаштовує, то використовуйте метод .css ( "Width"). Приклад порівняння двох моделей і цих методів представлений нижче.
jQuery синтаксис:
Повернення значень: Синтаксис 1.0: $ (selector) .height () // метод використовується без параметрів Установка значень: Синтаксис 1.0: $ (selector) .height (value) value - String (значення в довільних одиницях виміру), або Integer (значення в пікселях) Синтаксис 1.4.1: $ (selector) .height (function (index, currentValue)) index - Integer currentValue - Integer.
Запроваджений у версії jQuery
1.0 (синтаксис оновлений в 1.4.1)
значення параметрів
Параметр Опис value параметр визначає значення висоти, яке буде встановлено. Допускається вказувати будь-які одиниці вимірювання CSS, або вказувати тільки числове значення без одиниць виміру, в цьому випадку значення буде встановлено в пікселях. function (index, currentValue) Визначає функцію, яка повертає нове значення висоти, яке буде встановлено обраним елементам. Усередині функції this посилається на поточний елемент в наборі.
index - повертає індекс елемента в наборі.
currentValue - поточне значення висоти елемента.
приклад використання
<! DOCTYPE html> <html> <head> <title> Використання jQuery методу .height () (повернення значення) </ title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/ 3.1.0 / jquery.min.js "> </ script> <script> $ (document) .ready (function () {$ (" button ") .click (function () {// задаємо функцію при натисканні на елемент <button> console .log ($ ( "p") .css ( "height")); // використовуючи метод .css () повертаємо і виводимо в консоль браузера значення висоти першого елемента <p> console .log ($ ( " p ") .height ()); // використовуючи метод .height () повертаємо і виводимо в консоль браузера значення ширини першого елемента <p> console .log ($ (document) .height ()); // повертає і виводить в консоль браузера висоту HTML документа conso le .log ($ (window) .height ()); // повертає і виводить в консоль браузера висоту області перегляду браузера});}); </ Script> </ head> <body> <button> Клік </ button> <p style = "height: 5em"> Звичайний абзац </ p> <p style = "height: 5em"> Другий звичайний абзац </ p> </ body> </ html>
У цьому прикладі ми при натисканні на кнопку:
- з використанням jQuery методу .css () повертаємо і виводимо в консоль браузера значення висоти першого елемента <P> .
- з використанням jQuery методу .height () повертаємо і виводимо в консоль браузера значення висоти першого елемента <P> , Висоту HTML документа і значення висоти області перегляду браузера.
Результат нашого прикладу:
Приклад використання jQuery методу .height () (повернення значення)
Розглянемо наступний приклад в якому ми розглянемо відмінність методу .height () від методу .css () при використанні моделей обчислення ширини і висоти елементів content-box і border-box:
<! DOCTYPE html> <html> <head> <title> Використання jQuery методу .height () (моделі content-box і border-box) </ title> <style> 
.test1 {box-sizing: content-box; / * Модель за замовчуванням (включає в себе тільки зміст елементу) * / width: 200px; / * Ширина елемента * / height: 50px; / * Висота елемента * / padding: 10px; / * Зовнішні відступи з усіх сторін * / border: 10px solid green; / * Суцільна межа зеленого кольору розміром 10 пікселів * /} .test2 {box-sizing: border-box; / * Модель border-box (включає в себе зміст елемента, кордони і внутрішні відступи) * / width: 200px; / * Ширина елемента * / height: 50px; / * Висота елемента * / padding: 10px; / * Зовнішні відступи з усіх сторін * / border: 10px solid green; / * Суцільна межа зеленого кольору розміром 10 пікселів * /} </ style> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </ script> <script> $ (document) .ready (function () {$ ( "button") .click (function () {// задаємо функцію при натисканні на елемент <button> console .log ($ ( ".test1" ) .css ( "height")); // використовуючи метод .css () повертаємо і виводимо в консоль браузера значення висоти елемента з класом .test1 console .log ($ ( ".test1") .height ()); // використовуючи метод .height () повертаємо і виводимо в консоль браузера значення висоти елемента з класом .test1 console .log ($ ( ".test2") .css ( "height")); // використовуючи метод .css () повертаємо і виводимо в консоль браузера з начение висоти елемента з класом .test2 console .log ($ ( ".test2") .height ()); // повертає і виводить в консоль браузера значення висоти елемента з класом .test2});}); </ Script> </ head> <body> <button> Клік </ button> <p class = "test1"> Звичайний абзац </ p> <p class = "test2"> Звичайний абзац </ p> </ body > </ html>
У цьому прикладі ми при натисканні на кнопку:
- з використанням jQuery методу .css () повертаємо і виводимо в консоль браузера значення висоти елемента <P> з класом test1 і test2. Зверніть увагу незалежно від того яку модель використовують елементи результат виведення буде один.
- з використанням jQuery методу .height () повертаємо і виводимо в консоль браузера значення висоти елемента <P> з класом test1 і test2. Зверніть увагу, що в другому випадку, де елемент <P> використовує модель border-box, значення висновку не включає в себе як межі елементу, так і внутрішні відступи. У цьому полягає відмінність цього методу від методу .css () при використанні методу border-box.
Результат нашого прикладу:
Приклад використання jQuery методу .height () (моделі content-box і border-box)
Розглянемо наступний приклад в якому за допомогою методу .height () ми будемо встановлювати значення висоти, а не повертати.
<! DOCTYPE html> <html> <head> <title> Використання jQuery методу .height () (установка значень) </ title> <style>
body, html {height: 90%; / * Встановлюємо висоту елементів * /} div {margin-bottom: 10px; / * Зовнішній відступ від нижнього краю * / height: 20px; / * Встановлюємо висоту елементів * / background-color: orange; / * Встановлюємо колір заднього фону * /} </ style> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </ script> < script> $ (document) .ready (function () {$ ( "button") .click (function () {// задаємо функцію при натисканні на елемент <button> $ ( ".test1") .height (50); // встановлюємо висоту елементів з класом test1 в пікселях $ ( ".test2") .height ( "30%"); // встановлюємо висоту елементів з класом test2 в процентах});}); </ Script> </ head> <body> <button> Клік </ button> <div class = "test1"> 1 </ div> <div class = "test2"> 2 </ div> <div class = " test3 "> 3 </ div> <div class =" test4 "> 4 </ div> </ body> </ html>
У цьому прикладі ми при натисканні на кнопку з використанням jQuery методу .height () встановлюємо значення висоти елементів <Div> з класом test1 рівну 150 пікселів, а елементам з класом test2 значення ширини дорівнює 30% від батьківського елемента.
Зверніть увагу на те, що якщо ви задаєте значення не в пікселях (без вказівки одиниць виміру), то значення необхідно передавати у вигляді рядка.
Результат нашого прикладу:
Приклад використання jQuery методу .height () (установка значень)
Розглянемо наступний приклад в якому в якості параметра методу .height () ми передамо функцію.
<! DOCTYPE html> <html> <head> <title> Використання jQuery методу .height () (функція в якості параметра) </ title> <style>
body, html {height: 90%; / * Встановлюємо висоту елементів * /} div {float: left; / * Робимо елементи плаваючими * / margin-right: 25px; / * Зовнішній відступ з правого боку * / height: 90%; / * Встановлюємо висоту елементів * / width: 100px; / * Встановлюємо ширину елементів * / background-color: yellow; / * Встановлюємо колір заднього фону * /} </ style> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </ script> < script> $ (document) .ready (function () {$ ( "div") .click (function () {// задаємо функцію при натисканні на елемент <div> $ (this) .height (function (index, currentValue) {// задаємо функцію при натисканні на конкретний елемент <div> return currentValue - 50; // повертаємо нове значення висоти елемента (поточне значення мінус 50 пікселів)});});}); </ Script> </ head> <body> <button> Клік </ button> <div class = "test1"> </ div> <div class = "test2"> </ div> </ body> </ html >
У цьому прикладі ми як параметр методу .height () передаємо функцію, яка повертає і встановлює нове значення висоти елемента <Div> по якому проведений клік. У нашому випадку нова висота елемента вираховується як поточна висота елемента мінус 50 пікселів.
Результат нашого прикладу:
Приклад використання jQuery методу .height () (функція в якості параметра)
Розглянемо наступний приклад в якому за допомогою методу .resize () і методу .height () будемо відстежувати висоту області перегляду браузера і при її зміні встановлювати певний колір заднього фону.
<! DOCTYPE html> <html> <head> <title> Використання jQuery методу .height () при зміні висоти вікна </ title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/ 3.1.0 / jquery.min.js "> </ script> <script> $ (document) .ready (function () {$ (window) .resize (function () {// прив'язуємо обробник подій (спрацьовує при зміні розмірів вікна) if ($ (this) .height () 600 && $ (this) .height ()> 400) {// Якщо висота області перегляду менше 600 пікселів і більше 400 пікселів $ ( "body") .css ( "background -color "," yellow "); // встановлюємо колір заднього фону жовтий} else if ($ (this) .height () 800 && $ (this) .height ()> 600) {// Якщо висота області перегляду менше 600 пікселів і більше 400 пікселів $ ( "body") .css ( " background-color "," green "); // встановлюємо колір заднього фону зелений} else {// якщо не відповідає жодному умові $ (" body ") .css (" background-color "," blue "); // встановлюємо колір заднього фону синій}});}); </ Script> </ head> <body> <h1> Try to resize window </ h1> </ body> </ html>
У цьому прикладі за допомогою методу .resize () і методу .height () ми відстежуємо висоту області перегляду браузера і при її зміні встановлюємо певний колір заднього фону елементу <Body> . Якщо висота області перегляду менше 800 пікселів і більше 600 пікселів, то колір заднього фону буде встановлено жовтий. Якщо висота області перегляду менше 600 пікселів і більше 400 пікселів, то колір заднього фону буде встановлений зелений, в інших випадках колір заднього фону буде встановлений як синій.
Зверніть увагу, що при завантаженні сторінки колір буде білий, так як функція запуститися тільки при зміні розмірів вікна (jQuery метод .resize ()).
Результат нашого прикладу:
Приклад використання jQuery методу .height () при зміні висоти вікна jQuery DOM методи
