以html文本顯示當前div大小

Question

我試圖在另一個div中顯示div的寬度和高度。我使用resize: both對我想測量的div進行測量。我現在的問題是，當我調整div的時候數字不會更新。

$(function() { 
     var divheight = $("#resizediv").height(); 
     var divwidth = $("#resizediv").width(); 
     document.getElementById("divheightdisplay").innerHTML = divheight; 
     document.getElementById("divwidthdisplay").innerHTML = divwidth; 
    }); 

Fiddle

我也試過CSS Element Queries。但有一些問題overflow: hidden

Answer 1

的resize事件似乎並沒有適用於window以外的元素。

相反，你可以更新基於該mousemove事件：

$('#resizediv').on('mousemove', function() { 
    var divheight = $(this).height(), 
     divwidth = $(this).width(); 

    $('#divheightdisplay').html(divheight); 
    $('#divwidthdisplay').html(divwidth); 
}); 

Fiddle

Answer 2

如果div的內容是動態加載，那麼你將需要使用window.load事件得到正確的大小：

$(window).load(function() { 
    var divheight = $("#resizediv").height(); 
    var divwidth = $("#resizediv").width(); 
    document.getElementById("divheightdisplay").innerHTML = divheight; 
    document.getElementById("divwidthdisplay").innerHTML = divwidth; 
}); 

Answer 3

你將不得不調用回調函數，這將更新寬度和高度的價值觀，調整您的股利。

//Say this is the function which is resizing your div 
resize("#resizediv", callback()); 

function callback() { 
    var divheight = $("#resizediv").height(); 
    var divwidth = $("#resizediv").width(); 
    document.getElementById("divheightdisplay").innerHTML = divheight; 
    document.getElementById("divwidthdisplay").innerHTML = divwidth; 
}