Wie lässt sich eine Änderung der DIV-Dimension erkennen?

Question

Wie lässt sich eine Änderung der DIV-Dimension erkennen?

Gefragt el 27 de Juni, 2011: Wann wurde die Frage gestellt
521416 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich habe die folgende Beispiel-HTML, gibt es eine DIV, die 100% Breite hat. Es enthält einige Elemente. Bei der Größenänderung von Windows können die inneren Elemente neu positioniert werden, und die Größe des DIVs kann sich ändern. Ich frage, ob es möglich ist, die div's Dimension Änderung Ereignis Haken? und wie man das tun? Ich binde derzeit die Callback-Funktion an das jQuery-Resize-Ereignis auf dem Ziel-DIV, jedoch wird kein Konsolenprotokoll ausgegeben, siehe unten:

Before Resize enter image description here

<html>
<head>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" language="javascript">
            $('#test_div').bind('resize', function(){
                console.log('resized');
            });
    </script>
</head>
<body>
    <div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" />
        <input type="button" value="button 2" />
        <input type="button" value="button 3" />
    </div>
</body>
</html>

Gefragt el 27 de Juni, 2011 von William X

Answer 1

5 Antworten

Answer 2

9voto

Pointy Punkte 387467

Nur das Fensterobjekt erzeugt ein "Resize"-Ereignis. Die einzige Möglichkeit, die ich kenne, um zu tun, was Sie tun möchten, ist ein Intervall-Timer, der die Größe regelmäßig überprüft.

Beantwortet el 27 de Juni, 2011 von Pointy (387467 Punkte )

Answer 3

9voto

Aminadav Glickshtein Punkte 20337

Sie können verwenden iframe o object mit contentWindow o contentDocument bei der Größenänderung. Ohne setInterval o setTimeout

Die Schritte:

Setzen Sie die Position Ihres Elements auf relative
Hinzufügen innerhalb eines transparenten, absolut versteckten IFRAME
Anhören IFRAME.contentWindow - onresize Veranstaltung

Ein Beispiel für HTML:

<div style="height:50px;background-color:red;position:relative;border:1px solid red">
<iframe style=width:100%;height:100%;position:absolute;border:none;background-color:transparent allowtransparency=true>
</iframe>
This is my div
</div>

Das Javascript:

$('div').width(100).height(100);
$('div').animate({width:200},2000);

$('object').attr({
    type : 'text/html'
})
$('object').on('resize,onresize,load,onload',function(){
    console.log('ooooooooonload')
})

$($('iframe')[0].contentWindow).on('resize',function(){
    console.log('div changed')
})

Laufendes Beispiel

JsFiddle: https:/

Mehr sehen:

Lehm - Es basiert auf element-resize-event
element-resize-event

Beantwortet el 19 de Kann, 2016 von Aminadav Glickshtein (20337 Punkte )

Answer 4

7voto

Trem Punkte 100

Erstaunlicherweise ist dieses Problem, so alt es auch sein mag, in den meisten Browsern immer noch vorhanden.

Wie andere bereits gesagt haben, wird Chrome 64+ nun mit Resize Observes ausgeliefert, allerdings wird die Spezifikation noch fein abgestimmt und Chrome liegt derzeit (Stand: 29.01.2019) hinter der neuesten Ausgabe des Spezifikation .

Ich habe einige gute ResizeObserver-Polyfills in freier Wildbahn gesehen, aber einige folgen der Spezifikation nicht so genau und andere haben einige Berechnungsprobleme.

Ich brauchte dieses Verhalten dringend, um einige responsive Webkomponenten zu erstellen, die in jeder Anwendung verwendet werden können. Damit sie gut funktionieren, müssen sie jederzeit ihre Abmessungen kennen. ResizeObservers klang also ideal und ich beschloss, ein Polyfill zu erstellen, das die Spezifikation so genau wie möglich befolgt.

Repo: https://github.com/juggle/resize-observer

Demo: https://codesandbox.io/s/myqzvpmmy9

Beantwortet el 29 de Januar, 2019 von Trem (100 Punkte )

Answer 5

5voto

Zzarcon Punkte 259

Mit Clay.js ( https://github.com/zzarcon/clay ) ist es recht einfach, Änderungen der Elementgröße zu erkennen:

var el = new Clay('.element');

el.on('resize', function(size) {
    console.log(size.height, size.width);
});

Beantwortet el 6 de August, 2015 von Zzarcon (259 Punkte )

Answer 6

4voto

Gman Punkte 681

Hier ist eine vereinfachte Version der Lösung von @nkron, die auf ein einzelnes Element anwendbar ist (anstelle eines Arrays von Elementen in der Antwort von @nkron, die Komplexität brauchte ich nicht).

function onResizeElem(element, callback) {    
  // Save the element we are watching
  onResizeElem.watchedElementData = {
    element: element,
    offsetWidth: element.offsetWidth,
    offsetHeight: element.offsetHeight,
    callback: callback
  };

  onResizeElem.checkForChanges = function() {
    const data = onResizeElem.watchedElementData;
    if (data.element.offsetWidth !== data.offsetWidth || data.element.offsetHeight !== data.offsetHeight) {
      data.offsetWidth = data.element.offsetWidth;
      data.offsetHeight = data.element.offsetHeight;
      data.callback();
    }
  };

  // Listen to the window resize event
  window.addEventListener('resize', onResizeElem.checkForChanges);

  // Listen to the element being checked for width and height changes
  onResizeElem.observer = new MutationObserver(onResizeElem.checkForChanges);
  onResizeElem.observer.observe(document.body, {
    attributes: true,
    childList: true,
    characterData: true,
    subtree: true
  });
}

Der Ereignis-Listener und der Beobachter können durch entfernt werden:

window.removeEventListener('resize', onResizeElem.checkForChanges);
onResizeElem.observer.disconnect();

Beantwortet el 26 de August, 2019 von Gman (681 Punkte )

Wie lässt sich eine Änderung der DIV-Dimension erkennen?

Antworten

Die Schritte:

Ein Beispiel für HTML:

Laufendes Beispiel

Mehr sehen:

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Wie lässt sich eine Änderung der DIV-Dimension erkennen?

Antworten

Die Schritte:

Ein Beispiel für HTML:

Laufendes Beispiel

Mehr sehen:

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: