detect when div width is change using javascript

Question

I am new in javascript and I want to perform some action when the div with is changed

in jquery, I use this code

var width = $(window).width();
$(window).resize(function(){
   if($(this).width() != width){
      width = $(this).width();
       console.log(width);
   }
});

but I want to do it using javascript help me please...

http://stackoverflow.com/questions/15205609/call-a-function-when-window-is-resized — Ashok kumar, Oct 04 '16 at 06:35
actually, I don't want to use jquery on my whole site because I have not included jquery on my site it take 91 kb and I am, try reduce the size of my website — Aditya Dwivedi, Oct 04 '16 at 06:47
Use ResizeObserver: https://stackoverflow.com/a/39312522/47528 — Dan, May 04 '20 at 13:33

score 5 · Accepted Answer · edited May 08 '20 at 11:38

You can use on-resize-event like this:

var body = document.getElementsByTagName("BODY")[0];
    var width = body.offsetWidth;
    
    if (window.addEventListener) {  // all browsers except IE before version 9
      window.addEventListener ("resize", onResizeEvent, true);
    } else {
      if (window.attachEvent) {   // IE before version 9
        window.attachEvent("onresize", onResizeEvent);
      }
    }
    
    function onResizeEvent() {
      bodyElement = document.getElementsByTagName("BODY")[0];
      newWidth = bodyElement.offsetWidth;
      if(newWidth != width){
        width = newWidth;
        console.log(width);
      }
    }

score 0 · Answer 2 · answered Oct 04 '16 at 06:50

0

Subscribe to the onresize event

window.onresize = functionName

answered Oct 04 '16 at 06:50

snit80

623
7
13

score 0 · Answer 3 · answered Oct 04 '16 at 06:58

In Internet Explorer you can use "onresize", to trigger a JavaScript function whenever size of an element(div) or body is changed.

But "onresize" does not work the same way in other browsers. Mozilla Firefox will trigger the function only when body is resized not a div.

<body onresize="myFunction()">

will work in every browser

<div onresize="myFunction()">

Will work only in IE

detect when div width is change using javascript

3 Answers3

Linked