【div Resize】Javascript中非Window的DOM的onresize事件解决方案

转自：http://blog.csdn.net/cockroach02/article/details/49096999

Javascript 中onresize事件我们会在窗口大小发生改变的时候需要自适应的时候应用上，但是如果是这样的场景呢，那就需要想想其他的解决办法了：

场景1：先上图

页面是上下布局的，通过【上箭头】和【下箭头】控制下部div的大小，需求是：下面的图表需要实现根据DIV来实现图表重绘！

在这种情况下，仅仅有window.onresize的话是不够的，我们需要对监听此DIV的resize从而达到图表的重新绘制功能，贴代码吧：

      NormalText Code 
   

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

this is a Jquery plugin function that fire an event when the size of an element changed
//usage $().sizeChanged(function(){})
(function ($) {
    $.fn.sizeChanged = function (handleFunction) {
        var element = this;
        var lastWidth = element.width();
        var lastHeight = element.height();

        setInterval(function () {
            if (lastWidth === element.width()&&lastHeight === element.height())
                return;
            if (typeof (handleFunction) == 'function') {
                handleFunction({ width: lastWidth, height: lastHeight },
                               { width: element.width(), height: element.height() });
                lastWidth = element.width();