获取可调整大小的 clientHeight jQuery

Question

我正在尝试获取 originalElement 的 clientHeight，它是传递给调整大小事件 (see documentation on the resize event) 的 ui 参数的属性。

我的代码如下：

mapTableContainer.resizable({
    handles: 'n',
    resize: function(event, ui){
        console.log(ui.originalElement.clientHeight);
    }
});

问题是我一直在为 clientHeight 获取 "undefined"。如果我只登录 ui.originalElement，我可以看到 clientHeight，所以我确定我访问它是错误的，只是不确定访问它的正确方法。

（控制台登录图片ui.originalElement；见clientHeight）

Answer 1

您可以使用：

this.clientHeight

或

ui.element[0].clientHeight

element: The jQuery object representing the element to be resized

originalElement: The jQuery object representing the original element before it is wrapped

片段：

$( "#resizable" ).resizable({
  handles: 'n',
  resize: function(event, ui){
      console.log('Original Height: ' + ui.originalSize.height + 
      ' Current height: ' + ui.size.height + 
            '  this clientheight: ' + this.clientHeight);
  }
});

#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<div id="resizable" class="ui-widget-content">
    <h3 class="ui-widget-header">Resizable</h3>
</div>

获取可调整大小的 clientHeight jQuery

Get clientHeight jQuery resizable

jquery

resize