Onresize pour les éléments div?

Ajouter le suivant CSS et JavaScript sur votre page, et utiliser le addResizeListener et removeResizeListener méthodes pour écouter la taille de l'élément changements (sur le blog pour plus de détails: http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/):

Redimensionner Capteur CSS

.resize-triggers {
    visibility: hidden;
}

.resize-triggers, .resize-triggers > div, .contract-trigger:before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.resize-triggers > div {
  background: #eee;
  overflow: auto;
}

.contract-trigger:before {
  width: 200%;
  height: 200%;
}

Événement De Redimensionnement Des Méthodes

Voici le code JavaScript que vous aurez besoin pour activer l'événement de redimensionnement de l'écoute. Les deux premières fonctions sont des conditions préalables qui sont utilisés dans les principaux addResizeListener et removeResizeListener méthodes.

(function(){
var attachEvent = document.attachEvent;
if (!attachEvent) {
var requestFrame = (function(){
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
function(fn){ return window.setTimeout(fn, 20); };
return function(fn){ return raf(fn); };
})();
var cancelFrame = (function(){
var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame ||
window.clearTimeout;
return function(id){ return cancel(id); };
})();
function resetTriggers(element){
var triggers = element.__resizeTriggers__,
expand = triggers.firstElementChild,
contract = triggers.lastElementChild,
expandChild = expand.firstElementChild;
contract.scrollLeft = contract.scrollWidth;
contract.scrollTop = contract.scrollHeight;
expandChild.style.width = expand.offsetWidth + 1 + 'px';
expandChild.style.height = expand.offsetHeight + 1 + 'px';
expand.scrollLeft = expand.scrollWidth;
expand.scrollTop = expand.scrollHeight;
};
function checkTriggers(element){
return element.offsetWidth != element.__resizeLast__.width ||
element.offsetHeight != element.__resizeLast__.height;
}
function scrollListener(e){
var element = this;
resetTriggers(this);
if (this.__resizeRAF__) cancelFrame(this.__resizeRAF__);
this.__resizeRAF__ = requestFrame(function(){
if (checkTriggers(element)) {
element.__resizeLast__.width = element.offsetWidth;
element.__resizeLast__.height = element.offsetHeight;
element.__resizeListeners__.forEach(function(fn){
fn.call(element, e);
});
}
});
};
}
window.addResizeListener = function(element, fn){
if (attachEvent) element.attachEvent('resize', fn);
else {
if (!element.__resizeTriggers__) {
if (getComputedStyle(element).position == 'static') element.style.position = 'relative';
element.__resizeLast__ = {};
element.__resizeListeners__ = [];
(element.__resizeTriggers__ = document.createElement('div')).className = 'resize-triggers';
element.__resizeTriggers__.innerHTML = '<div class="expand-trigger"><div></div></div>' +
'<div class="contract-trigger"></div>';
element.appendChild(element.__resizeTriggers__);
resetTriggers(element);
element.addEventListener('scroll', scrollListener, true);
}
element.__resizeListeners__.push(fn);
}
};
window.removeResizeListener = function(element, fn){
if (attachEvent) element.detachEvent('resize', fn);
else {
element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
if (!element.__resizeListeners__.length) {
element.removeEventListener('scroll', scrollListener);
element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
}
}
}
})();

Démo-licious!

Voici un pseudo-code d'utilisation de la méthode.

var myElement = document.getElementById('my_element'),
myResizeFn = function(){
/* do something on resize */
};
addResizeListener(myElement, myResizeFn);
removeResizeListener(myElement, myResizeFn);

Actuellement toutes les grandes navigateur ne supporte pas d'événement de redimensionnement au format html de l'élément, juste pour l'objet window.

Ce que vous pouvez faire est d'intercepter l'interaction de l'utilisateur pour construire votre propre écouteur, comme ceci:

function detectResize(_element)
{
let promise = {};
let _listener = [];
promise.addResizeListener = function(listener)
{
if(typeof(listener) != "function") { return; }
if(_listener.includes(listener)) { return; };
_listener.push(listener);
};
promise.removeResizeListener = function(listener)
{
let index = _listener.indexOf(listener);
if(index >= 0) { _listener.splice(index, 1); }
};
let _size = { width: _element.clientWidth, height: _element.clientHeight };
function checkDimensionChanged()
{
let _currentSize = { width: _element.clientWidth, height: _element.clientHeight };
if(_currentSize.width != _size.width || _currentSize.height != _size.height)
{
let previousSize = _size;
_size = _currentSize;
let diff = { width: _size.width - previousSize.width, height: _size.height - previousSize.height };
fire({ width: _size.width, height: _size.height, previousWidth: previousSize.width, previousHeight: previousSize.height, _element: _element, diff: diff });
}
_size = _currentSize;
}
function fire(info)
{
if(!_element.parentNode) { return; }
_listener.forEach(listener => { listener(info); });
}
let mouseDownListener = event =>
{
let mouseUpListener = event => 
{
window.removeEventListener("mouseup", mouseUpListener);
window.removeEventListener("mousemove", mouseMoveListener);
};
let mouseMoveListener = event =>
{
checkDimensionChanged();
};
window.addEventListener("mouseup", mouseUpListener);
window.addEventListener("mousemove", mouseMoveListener);
};
_element.addEventListener("mousedown", mouseDownListener);
window.addEventListener("resize", event =>
{
checkDimensionChanged();
});
return promise;
}

Comment l'utiliser:

document.addEventListener("DOMContentLoaded", event =>
{
let textarea = document.querySelector("textarea");
let detector = detectResize(textarea);
let listener = info => { console.log("new width: ", info.width, "  new height: ", info.height); };
detector.addResizeListener(listener);
});

html:

<textarea></textarea>

css:

html, body
{
height: 100%;
box-sizing: border-box;
overflow: hidden;
margin: 0px;
}
textarea
{
resize: both;
width: 96px;
height: 112px;
width: 100%;
height: 100%;
border: 1px solid black;
}