Question

我有div，它已经应用了resize功能。当我调整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。如果您希望在不同的会话之间保持这种状态，请使用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>

希望这会有所帮助：）

如何在应用resize函数时获取div的运行时尺寸？

1 个答案: