i want call code when width of block listen changes. how to?
onresize invoked when size of window changes.
as mentioned, there no resize event elements on page, window.
you can use mutation observers detect changes in element:
var foo = document.queryselector('#foo'), oldwidth = foo.style.width, observer = new mutationobserver(function(mutations) { mutations.foreach(function(mutation) { if (mutation.target === foo && mutation.attributename === 'style' && oldwidth !== foo.style.width) { console.log('width changed!'); oldwidth = foo.style.width; } }); }); // configuration of observer, attribute changes: var config = { attributes: true }; observer.observe(foo, config); with little more work can create function add custom event element want detect width changes on:
var addwidthchangeevent = function (element) { var oldwidth = foo.style.width, observer = new mutationobserver(function(mutations) { mutations.foreach(function(mutation) { if (mutation.target === element && mutation.attributename === 'style' && oldwidth !== element.style.width) { oldwidth = foo.style.width; element.dispatchevent(new event('widthchange')); } }); }); // configuration of observer, attribute changes: var config = { attributes: true }; observer.observe(element, config); } var foo = document.getelementbyid('foo'); // create custom event observer addwidthchangeevent(foo); // can use addeventlistener or jquery react // 'widthchange' events foo.addeventlistener('widthchange', function (event) { // every time width changes text inside box // changed new width foo.textcontent = foo.style.width; }, false); 