jQuery - 调整浏览器窗口大小后自动更改值答案

【问题标题】：jQuery - Automatic change values after resizing the browser windowjQuery - 调整浏览器窗口大小后自动更改值
【发布时间】：2014-08-19 13:36:11
【问题描述】：

我们有以下代码（另外，插件DataTables的存在）

$('#myTable').dataTable( {
      "scrollY":  height, <-- auto height here
      "scrollCollapse": true,
} );

我不太了解 jquery，我对自动更改值有疑问。

我有一个高度为百分比的 div 元素（例如：50%）和我想以像素为单位获得这个高度。当然，高度随着浏览器窗口的变化而变化。

很遗憾，我不知道该怎么做，有人可以帮忙吗？（最好是一个例子）

更新 1：

我就这样尝试过

    var ch = $('#dataTableWrapper').height() - 110; // I subtracted the value of the height of my static elements in a div 

    $('#dataTableID').dataTable( {
        "scrollY": ch,
        "scrollCollapse": true,
    } );

    $(window).resize(function(){
        ch = $('#dataTableWrapper').height() - 110; // same as above
        $('.dataTables_scrollBody').css('height', ch);
    });

显然它有效，但如果有人有更优雅的解决方案，我会询问有关抛出代码的问题。

【问题讨论】：

听起来你想要 jQuery 函数 resize() api.jquery.com/resize

标签： javascript jquery datatables

【解决方案1】：

你可以这样做：

$( window ).resize(function() {
   var scroll = $("#yourDiv").height();
   });

【讨论】：

【解决方案2】：

这可能是一个愚蠢的建议，但你只是在寻找一个简单的重构？

function getTableHeight() {
    return $('#dataTableWrapper').height() - 110;
}

$('#dataTableID').dataTable( {
    "scrollY": getTableHeight(),
    "scrollCollapse": true,
} );

$(window).resize(function(){
    $('.dataTables_scrollBody').css('height', getTableHeight());
});

【讨论】：