Html событие изменения размеров

Отслеживаем «onresize» на элементе

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

Трюк: Внутрь элемента вставляем пустой фрейм с position:absolute и 100%- (ыми) размерами, придаём элементу position:relative; . И отслеживаем frame.onresize :

Тест-Код:

 
Тут контент .
  

Под спойлером

Код:

 
 Тут контент .
  

Источник

Window: resize event

The resize event fires when the document view (window) has been resized.

This event is not cancelable and does not bubble.

In some earlier browsers it was possible to register resize event handlers on any HTML element. It is still possible to set onresize attributes or use addEventListener() to set a handler on any element. However, resize events are only fired on the window object (i.e. returned by document.defaultView ). Only handlers registered on the window object will receive resize events.

While the resize event fires only for the window nowadays, you can get resize notifications for other elements using the ResizeObserver API.

If the resize event is triggered too many times for your application, see Optimizing window.onresize to control the time after which the event fires.

Syntax

Use the event name in methods like addEventListener() , or set an event handler property.

addEventListener("resize", (event) => >); onresize = (event) => >; 

Event type

Event properties

This interface also inherits properties of its parent, Event . UIEvent.detail Read only Returns a long with details about the event, depending on the event type. UIEvent.sourceCapabilities Experimental Read only Returns an instance of the InputDeviceCapabilities interface, which provides information about the physical device responsible for generating a touch event. UIEvent.view Read only Returns a WindowProxy that contains the view that generated the event. UIEvent.which Deprecated Non-standard Read only Returns the numeric keyCode of the key pressed, or the character code ( charCode ) for an alphanumeric key pressed.

Examples

Window size logger

HTML

p>Resize the browser window to fire the code>resizecode> event.p> p>Window height: span id="height">span>p> p>Window width: span id="width">span>p> 

JavaScript

const heightOutput = document.querySelector("#height"); const widthOutput = document.querySelector("#width"); function reportWindowSize()  heightOutput.textContent = window.innerHeight; widthOutput.textContent = window.innerWidth; > window.onresize = reportWindowSize; 

Result

addEventListener equivalent

.addEventListener("resize", reportWindowSize); 

Specifications

Browser compatibility

Found a content problem with this page?

This page was last modified on Apr 8, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Отслеживаем ресайзинг элемента без setTimeout и фреймов

Наверно каждый WEB-разработчик когда-либо сталкивался с проблемой отслеживания события resize на странице. И если для window это сделать сможет любой новичок, то для остальных элементов эта задача принесет немало головной боли. Если вы относитесь к этой категории людей, то добро пожаловать под кат.

В интернете есть много статей где эта проблема решается с помощью setInterval или, в лучшем случае, рекурсивного setTimeout, который постоянно через определенные промежутки времени проверяет не изменились ли размеры указанного элемента. Но в большинстве случаев размеры элемента изменяются очень редко, поэтому такой способ является неприемлемым и к тому же может приводить к излишним тратам памяти.

На Хабре я нашел решение для отслеживания «onresize» на элементе путем добавления внутрь него фрейма. Этот способ рабочий и в большинстве случаев наверняка будет полезен. Но что делать если по какой-то причине не хочется добавлять лишний фрейм внутрь элемента? Я хочу предложить еще пару способов для отслеживания изменения размеров элемента.

Для начала я разобью случаи в которых изменяются размеры элемента на категории:

Первый способ: DOMSubtreeModified

Чаще всего необходимость отслеживания размера элемента возникает для того, чтобы обновить состояние какого-либо плагина при изменении контента в определенном блоке. Например обновить плагин карусели после того как изменилась высота контента внутри него.

Для этого нет необходимости наблюдать за изменением размеров элемента средствами CSS, а достаточно лишь отследить изменение структуры DOM внутри элемента.

Это можно легко осуществить используя событие DOMSubtreeModified, которое срабатывает всякий раз когда структура или текст внутри элемента изменяется:

el.addEventListener("DOMSubtreeModified", function (e) < console.log("Размеры элемента: " + el.clientWidth + " X " + el.clientHeight); >, false); 

Второй способ: transitionend

Для того чтобы отследить изменение размеров через CSS придется добавить следующие стили:

Список свойств, как и длительность перехода можно подобрать под себя. Вполне возможно, что какие-то из этих свойств у элемента уже заданы или нет надобности применять их ко всем вложенным элементам.

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

Таким образом у целевого блока и у всех элементов внутри него будет установлена мгновенная трансформация и так, как событие всплывает, то теперь мы можем отследить событие transitionend, которое сработает, когда CSS transition закончит свое выполнение на любом дочернем элементе:

el.addEventListener("transitionend", function () < console.log("Размеры элемента: " + el.clientWidth + " X " + el.clientHeight); >, false); 

К сожалению нет свойства transitionstart и transition или transitioninterval, поэтому событие срабатывает только по окончании перехода, так что значение transition-duration следует выбирать небольшое. Но если установить transition-duration равное 0, то событие не будет срабатывать вовсе.

Заключение

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

Надеюсь эта статья окажется полезной. Буду рад обоснованной критике, так как это мой первый опыт на Хабре.

UPD: Обновил демо, сделав его более наглядным и дополнил описание второго способа.

Источник

onresize Event

The onresize event occurs when the browser window has been resized.

Tip: To get the size of an element, use the clientWidth, clientHeight, innerWidth, innerHeight, outerWidth, outerHeight, offsetWidth and/or offsetHeight properties.

Browser Support

Syntax

In JavaScript, using the addEventListener() method:

Technical Details

Bubbles:	No
Cancelable:	No
Event type:	UiEvent if generated from a user interface, Event otherwise
HTML tags:
DOM Version:	Level 2 Events

More Examples

Example

Using the addEventListener() method to attach the «resize» event on the window object.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Событие изменения размера окна в JavaScript

1. Добавить событие изменения размера с помощью функции addEventListener() в JavaScript
2. Добавить событие изменения размера с помощью функции onresize() в JavaScript

В этом руководстве будет обсуждаться добавление события изменения размера с помощью функций addEventListener() и onresize() в JavaScript.

Добавить событие изменения размера с помощью функции addEventListener() в JavaScript

Чтобы добавить событие изменения размера в окно, мы можем использовать функцию addEventListener() в JavaScript. Эта функция добавляет к объекту событие, содержащее функцию. Например, давайте добавим событие в окно объекта, чтобы получить его ширину и высоту и отобразить его на веб-странице. См. Код ниже.

 html> head>  title>title>  head> body>  span>Width = span>span id="SpanID1">span>  br />  span>Height = span>span id="SpanID2">span>  script type="text/javascript"> start(); window.addEventListener('resize', start);  function start()  document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;  document.getElementById('SpanID2').innerText = document.documentElement.clientHeight; >  script>  body>  html> 

В приведенном выше коде мы добавили диапазон с текстом Width= , а после этого мы добавили пустой диапазон с идентификатором SpanID1 в раздел body. Мы добавили тег br для перемещения курсора на новую строку, а в новой строке мы добавили еще один диапазон с текстом Height= , а после этого мы добавили еще один пустой диапазон с идентификатором SpanID2 .

Идентификатор диапазона будет использоваться для получения элемента в JavaScript. В теге скрипта у нас есть функция start() , которая используется для изменения текста двух промежутков в зависимости от ширины и высоты окна. После функции start() мы добавили событие изменения размера, которое будет вызывать функцию start() , когда пользователь изменяет размер окна. Ширина и высота окна будут отображаться на странице и будут меняться по мере изменения размера окна. Вы можете сохранить приведенный выше код в HTML-файл, открыть его в любом браузере и изменить его размер, чтобы увидеть, работает ли код или нет. Вы также можете использовать функцию addEventListener() , чтобы добавить событие к любому объекту, например, к флажку.

Добавить событие изменения размера с помощью функции onresize() в JavaScript

Чтобы добавить событие изменения размера в окно, мы можем использовать функцию onresize() в JavaScript. Эта функция используется, чтобы указать, что произойдет, если размер окна изменится. Например, давайте добавим событие в окно объекта, чтобы получить его ширину и высоту и отобразить его на веб-странице. См. Код ниже.

 html> head>  title>title>  head> body>  span>Width = span>span id="SpanID1">span>  br />  span>Height = span>span id="SpanID2">span>  script type="text/javascript"> start(); window.onresize = start; function start()  document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;  document.getElementById('SpanID2').innerText = document.documentElement.clientHeight; >  script>  body>  html> 

В приведенном выше коде функция start() будет вызываться при изменении размера окна. Как видите, результат такой же, как и у описанного выше метода.

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

Сопутствующая статья — JavaScript Event

Источник