jQuery метод .resize()

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

jQuery метод .resize() привязывает JavaScript обработчик событий resize (срабатывает при изменении размеров окна браузера), или запускает это событие на выбранный элемент.

jQuery синтаксис:

Синтаксис 1.0:

$( selector ).resize() // метод используется без параметров

$( selector ).resize( handler )

handler - Function( Event eventObject )

Синтаксис 1.4.3:

$( selector ).resize( eventData, handler )

eventData - Anything

handler - Function( Event eventObject )

Обращаю Ваше внимание, что метод .resize(), используемый вместе с функцией, переданной в качестве параметра (handler) является, короткой записью метода .on(), а без параметра является короткой записью метода .trigger():

$( selector ).on( "resize", handler ) // снятие возможно с .off( "resize" )

$( selector ).trigger( "resize" )

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

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

Пример старого кода

Метод .resize() — пример 1

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button>
<p></p>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        $(window).resize() // вызываем событие "resize" на объекте window
    })
    $(window).resize(function () {
        // задаем функцию при срабатывании события "resize" на объекте window
        var width = $(window).width() // ширина области просмотра браузера
        $('p').html(width) // вставляем значение ширины области просмотра браузера
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery метода .resize() мы при нажатии на элемент <button> (кнопка) вызываем событие "resize" на объекте window, которому задали, что при срабатывании события "resize" необходимо получить значение ширины области просмотра браузера и вставить его в элемент <p>. При изменении размеров окна браузера значение в элементе <p> будет изменяться.