如何在javaScript中獲取動態div寬度

Question

我有兩個div demo1和demo2。如果在這段時間內我將demo1從左向右和從右向左拖動，我需要demo2寬度自動調整 我試過了

<div class="wrapper">
              <div class="demo"></div>
              <div class="demo2"></div>
</div> 
<STYLE>
.demo {
    float: left; 
    width: 50%;
    height:100%;
    background-color: red;
}
.demo2 { 
    float: left;
    background-color: black;
    width: 50%;
    height:100%;
}</STYLE>
<script type="text/javascript">
         (function(){

      maxWidth=$('.wrapper').width();
      $('.demo').resizable(function(e){

        var x = e.pageX;
        alert(x);

        $(this).width(x);
        $('.demo2').width(maxWidth-x);


    });
})()
 </script>

但是，當我左右拖動demo1時，demo2的寬度不會自動調整。 請任何人告訴我代碼中的錯誤。

Answer 1

我認為您誤解了語法。 您可以綁定到resize事件以執行所需的操作：

(function () {
    var maxWidth = $('.wrapper').width();
    $('.demo').resizable({
        resize: function (e, ui) {
            var x = e.pageX;
            $(this).width(x);
            $('.demo2').width(maxWidth - x);;
        }
    });
})();

演示： http ： //jsfiddle.net/rcsxj3xb/1/