javascript - 窗口调整大小确定控件的父级是更大还是更大

我需要一个脚本来确定何时调整conrol的父元素宽度。这是在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>

最佳答案

这是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>

关于javascript - 窗口调整大小确定控件的父级是更大还是更大，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13575886/