JS / jQuery如何获得动态(响应)div的高度?

时间:2014-06-12 18:24:38

标签: javascript jquery html css

我无法在SO上找到适合我的答案。

基本上我有一个div,其图像具有固定的定位。它具有响应性,并且会缩小或增长到屏幕尺寸。

我想要做的是在屏幕大小改变的任何时候获取高度,并将其作为另一个div的定位值输入,以便它没有重叠(由于固定的定位)。

我最初可以获得高度但是在调整屏幕大小时第一个值之后它永远不会改变。

快速演示:link

在控制台中查看返回的高度。请注意,调整浏览器大小时它不会改变。

JS

$(function(){

    var explore = $('#explore').height();
    console.log(explore);

    $( window ).on("resize", function() {
    console.log(explore);
    });

});

我还试过.css("height"),但这并没有解决问题。

*请注意div在此示例中没有固定的定位,因为它会使布局更加混乱

2 个答案:

答案 0 :(得分:8)

您没有修改探索:

按如下方式更改:

$(function(){

    var explore = $('#explore').css("height");
    console.log(explore);

    $( window ).on("resize", function() {
       explore = $('#explore').css("height");
       console.log(explore);
    });

});

答案 1 :(得分:1)

您需要向窗口添加一个调整大小监听器,如下所示:

function repositionDivOnResize() {
 // this is where you'll dynamically reposition your element
}

$(window).on("resize", repositionDivOnResize)