如何在javaScript中获取动态div宽度

我有两个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的宽度不会自动调整。

---

请任何人告诉我我的代码有什么错误。

我想你误解了语法。您可以绑定到调整大小事件以执行所需操作：

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

---

演示：

开始时，html中缺少一个with@k-nut这是我的复制错误，如果你有任何问题，请帮助我你可以用这个创建一个JSFIDLE吗？@k-nut我试过了，但它在JSFIDLE中不起作用什么不起作用？谢谢你的回复，我试过在你旁边使用resize，但不起作用我需要从左向右拖动红色divblack div自动屏幕调整ex:red div 50%black div 50%当我拖动red div 70%black div调整到30%时，请给我任何想法，这正是我发布的链接中发生的事情。您可以在中间的红色和黑色DIF之间拖动线，以调整红色元素的大小。对我来说，它在FF和Chrome中工作得非常好。你在小提琴上看到了什么？当你拖动时会发生什么？还有，你用的是什么浏览器？你确定吗？我无法用chrome复制你说的话。我添加了一些文本，以便您可以清楚地看到div确实已调整大小