Как определить изменение размера DIV?

Опубликовано: 18 Декабря, 2021

Изменение размера div можно обнаружить с помощью двух подходов:

Метод 1. Проверка изменений с помощью интерфейса ResizeObserver.
Интерфейс ResizeObserver используется для сообщения об изменениях размеров элемента.
Отслеживаемый элемент сначала выбирается с помощью jQuery. Объект ResizeObserver создается с функцией обратного вызова, которая определяет, какое действие следует выполнить при обнаружении изменения измерения.
Метод наблюдения () этого объекта используется для отслеживаемого элемента. Это проверит любые изменения и выполнит функцию обратного вызова при обнаружении любого изменения измерения.

Синтаксис:

 let resizeObserver = new ResizeObserver(() => {
    console.log( "The element was resized" );
 });
 
resizeObserver.observe(elem);

Пример:

 <!DOCTYPE html>
 < html >
 
< head >
    < title >
        How to detect DIV's dimension changed?
    </ title >
    < style >
        #box {
            resize: both;
            border: solid;
            background-color: green;
            height: 100px;
            width: 100px;
            overflow: auto;
        }
    </ style >
 </ head >
 
< body >
    < h1 style = "color: green" >
      GeeksForGeeks
    </ h1 >
    < b >
      How to detect DIV's dimension changed?
    </ b >
    < p >Check the console to know if the div's dimensions have changed.
    </ p >
    < div id = "box" ></ div >
    < script src = " https://code.jquery.com/jquery-3.3.1.min.js " >
    </ script >
 
    < script >
        elem = $("#box")[0];
 
        let resizeObserver = new ResizeObserver(() => {
            console.log("The element was resized");
        });
 
        resizeObserver.observe(elem);
    </ script >
 </ body >
 
</ html > 

Выход:

Перед изменением размера элемента:
После изменения размера элемента:

Метод 2: проверка изменений размеров каждые 500 миллисекунд
Этот метод включает проверку размеров отслеживаемого элемента каждые 500 миллисекунд. Значения размеров сравниваются со значениями более старой итерации, чтобы проверить, есть ли разница.

Высота и ширина отслеживаемого элемента определяется с помощью методов height () и width () в jQuery. Эти размеры будут использоваться в качестве последних отслеживаемых базовых размеров элемента и сохраняться в переменной.

Создается новая функция, в которой узнаются высота и ширина элемента. Это будут новые измерения, которые будут сравниваться с предыдущими. Если эта новая высота и ширина сравниваются с ранее найденной базовой линией, используется оператор if. Если размеры не совпадают, значит, размеры изменились. Требуемое действие, которое необходимо предпринять, когда здесь будет выполнено изменение размеров.
Найденные новые измерения будут назначены старым в качестве базовых, чтобы можно было проверить с ними следующую итерацию.
Созданная функция находится в цикле каждые 500 миллисекунд с использованием функции setInterval () . Это будет постоянно проверять изменения высоты и ширины и выполнять заданную функцию всякий раз, когда есть разница.
Этот метод значительно медленнее, чем предыдущий, и уменьшение времени между каждой проверкой еще больше снизит производительность.

Синтаксис:

 let lastHeight = $( "#box" ).height();
 let lastWidth = $( "#box" ).width();
 
function checkHeightChange() {
    newHeight = $( "#box" ).height();
    newWidth = $( "#box" ).width();
 
    if (lastHeight != newHeight || lastWidth != newWidth) {
        console.log( "The element was resized" );
 
        // assign the new dimensions
        lastHeight = newHeight;
        lastWidth = newWidth;
     }
 }
 
setInterval(checkHeightChange, 500);

Пример:

 <!DOCTYPE html>
 < html >
 
< head >
    < title >
        How to detect DIV's dimension changed?
    </ title >
    < style >
        #box {
            resize: both;
            border: solid;
            background-color: green;
            height: 100px;
            width: 100px;
            overflow: auto;
        }
    </ style >
 </ head >
 
< body >
    < h1 style = "color: green" >
      GeeksForGeeks
    </ h1 >
    < b >
      How to detect DIV's dimension changed?
    </ b >
    < p >Check the console to know if the div's dimensions have changed.
    </ p >
    < div id = "box" ></ div >
    < script src = " https://code.jquery.com/jquery-3.3.1.min.js " >
    </ script >
 
    < script type = "text/javascript" >
        let lastHeight = $("#box").height();
        let lastWidth = $("#box").width();
 
        function checkHeightChange() {
            newHeight = $("#box").height();
            newWidth = $("#box").width();
 
            if (lastHeight != newHeight ||
                lastWidth != newWidth) {
                console.log("The element was resized");
 
                // assign the new dimensions
                lastHeight = newHeight;
                lastWidth = newWidth;
            }
        }
 
        setInterval(checkHeightChange, 500);
    </ script >
 </ body >
 
</ html > 

Выход:

Перед изменением размера элемента:
После изменения размера элемента:

Вопросы о Web технологиях JQuery Picked

Как определить изменение размера DIV?

РЕКОМЕНДУЕМЫЕ СТАТЬИ