javascript - 窗口调整大小确定控件父级更小或更大

Question

我需要一个脚本来确定何时调整控件的父元素宽度。这是在 windows 调整大小事件上确定的，我只需要立即知道父级是比以前小还是大。请留下一个工作示例 - 将不胜感激谢谢

JavaScript：

(function ($) {
   $.fn.quicklist = function () {
      var _this = this;
      var config = {   
         quicklistParentWidth: $(_this).parent().width(),    
      }                

      var parentWidth = config.quicklistParentWidth;
      $(window).resize(function (event) {
         var currWidth = config.quicklistParentWidth;
         $(_this).parent().css('width', config.quicklistParentWidth);

         if (currWidth > parentWidth) {
            $('#width').text('greater');    
         } else if(parentWidth < currWidth) {
            $('#smaller').text('smaller');
         }
         parentWidth = currWidth;
      });
   };
})(jQuery);

$(document).ready(function () {            
   $('#quicklist').quicklist();
});

HTML：

<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr style="height:34px">
        <td style="background:url(images/classic/quicklink_bar.png) 0px 0px; background-repeat:repeat-x; width:100%;">
            <ul id="quicklist">
                <li><a href="#">List Goes here</a></li>
           </ul>
        </td>
        <td style="background:url(images/classic/quicklink_bar.png) 0px 0px; background-repeat:repeat-x; ">
            <a id="link" href="#">Link</a>
        </td>
    </tr>
</table>
<span id="width"></span>    

Answer 1

这是javascript中的工作版本。http://jsfiddle.net/ZhG8N/

<div style="width:50%; background:#F00">not yet resized
    <div id="child"></div>
</div>

<script>
var parent = document.getElementById('child').parentNode,
    lastSize = parent.offsetWidth,
    newSize, timer;


window.onresize = function(){
    newSize = parent.offsetWidth;
    if(lastSize > newSize){
        parent.innerHTML = 'smaller';
    }
    else if(lastSize< newSize){
        parent.innerHTML = 'wider';
    }
    lastSize = newSize;
}
</script>