Размер jQuery

С помощью jQuery можно легко обрабатывать размеры элементов и окна браузера.

jQuery предоставляет эффективные методы для работы с размерами элементов.

В этой главе мы объясним, как получить или установить размер HTML-элемента.

Методы размеров jQuery

У нас есть следующие методы jQuery для обработки размеров:

• width()

• height()

• innerWidth()

• innerHeight()

• outerWidth()

• outerHeight()

Ниже мы покажем, как использовать каждый метод.

Понять размер jQuery

Просмотрите изображение ниже, чтобы понять, как эти методы вычисляют размер рамки элемента.

Методы width() и height() jQuery

jQuery width()Метод получения или установки ширины выбранного элемента (без внутреннего отступа, рамки и внешнего поля).

jQuery height()Метод получения или установки высоты выбранного элемента (без внутреннего отступа, рамки и внешнего поля).

Ниже приведен пример получения ширины и высоты элемента DIV:

$("div").click(function(){
　　let w = $(this).width();
　　let h = $(this).height();
　　$(this).html("Ширина DIV: " + w + "<br>" + "Высота DIV: " + h);
});

Ниже приведен пример установки ширины и высоты всех абзацев:

$("button").click(function(){
　　$("p").width(250);
　　$("p").height(100);
});

jQuery methods innerWidth() и innerHeight()

jQuery innerWidth()Метод получения или установки ширины выбранного элемента (включая внутренние поля).

jQuery innerHeight()Метод получения или установки высоты выбранного элемента (включая внутренние поля).

Ниже приведен пример получения внутренней ширины и высоты DIV элемента:

$("div").click(function(){
　　let w = $(this).innerWidth();
　　let h = $(this).innerHeight();
　　$(this).html("Внутренняя ширина: " + w + "<br>" + "Внутренняя высота: " + h);
});

jQuery methods externalWidth() и outsideHeight()

jQuery outerWidth()Метод получения или установки ширины выбранного элемента (включая внутренние поля и рамки).

jQuery outerHeight()Метод получения или установки высоты выбранного элемента (включая внутренние поля и рамки).

Ниже приведен пример получения внешней ширины и высоты DIV элемента:

$("div").click(function(){
　　let w = $(this).outerWidth();
　　let h = $(this).outerHeight();
　　$(this).html("Внешняя ширина: " + w + "<br>" + "Внешняя высота: " + h);
});

outerWidth(true) Метод получения или установки ширины выбранного элемента (включая внутренние поля, рамки и внешние отступы).

outerHeight(true) Этот метод��取或 устанавливает высоту выбранного элемента (включая внутренние поля, рамки и внешние отступы).

Ниже приведен пример получения внешней ширины и высоты DIV элемента (включая отступы):

$("div").click(function(){
　　let w = $(this).outerWidth(true);
　　let h = $(this).outerHeight(true);
　　$(this).html("Внешняя ширина [+маржа]:" + w + "<br>" + "Внешняя высота [+маржа]: " + h);
});

Более примеры

Показать различия между width(), height(), innerWidth(), innerHeight(), outerWidth() и outerHeight():

$("button").click(function(){
　　$("div").width();
　　$("div").innerWidth();
　　$("div").outerWidth();
　　$("div").height();
　　$("div").innerHeight();
　　$("div").outerHeight();
});

Вы также можете найти ширину и высоту окна и документа:

$(window).width(); // Возвращает ширину браузерного окна
$(document).width(); // Возвращает ширину HTML документа
$(window).height(); // Возвращает высоту браузерного окна
$(document).height(); // Возвращает высоту HTML документа

Референтное руководство по CSS jQuery

Для получения полной информации о методах CSS обратитесь в нашРеферентное руководство по HTML / CSS jQuery.