Question

我尝试在另一个div中显示当前div的宽度和高度。我在我试图测量的div上使用resize: both。我现在遇到的问题是，当我调整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

在调整div的大小时，你必须调用一个回调函数来更新宽度和高度的值。

//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;
}

在html文本中显示当前div大小

3 个答案: