javascript - 如何在应用调整大小功能时获取 ​​div 的运行时尺寸？

Question

我有一个应用了调整大小功能的 div。 当我调整 div 大小时并刷新页面时，它保留相同的旧尺寸。 我需要的是，即使在刷新后它也应该保留调整后的值。 有什么想法可以实现这一目标吗？

$(function() {
  $("#box").resizable();
  $('#main').draggable();
  $("#button").click(function() {
    if ($(this).html() == "-") {
      $(this).html("+");
    } else {
      $(this).html("-");
    }
    $("#box").slideToggle();
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<div class="main" id="main">
  <div id="title_bar">
    <div id="button">-</div>
  </div>
  <div id="box">
    <marquee direction="right">
      <h4>Hi user</h4>
    </marquee>
  </div>
</div>

Answer 1

为此使用 SessionStorage。如果您希望它在不同 session 之间持续存在，请使用 localStorage。下面是代码和 Fiddle Demo

Updated Fiddle

$(function() {
  var wid = window.sessionStorage.getItem("boxWidth");
  var hit = window.sessionStorage.getItem("boxHeight");
  if (typeof wid != 'undefined' && typeof hit != 'undefined') {
    $('#box').css('width', parseInt(wid));
    $('#box').css('height', parseInt(hit));
  }
  $("#box").resizable();
  $("#box").on("resize", function() {
    sessionStorage.setItem("boxWidth", $("#box").css('width'))
    sessionStorage.setItem("boxHeight", $("#box").css('height'))
  })
  $('#main').draggable();
  $("#button").click(function() {
    if ($(this).html() == "-") {
      $(this).html("+");
    } else {
      $(this).html("-");
    }
    $("#box").slideToggle();
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<div class="main" id="main">
  <div id="title_bar">
    <div id="button">-</div>
  </div>
  <div id="box">
    <marquee direction="right">
      <h4>Hi user</h4>
    </marquee>
  </div>
</div>

希望这有帮助:)