Question

我将div的偏移量存储为文档大小的百分比（例如{position_x：0.50，position_y：0.50}）。然后将该数字乘以文档宽度/高度，以获得用于设置div的偏移量的像素值。问题是，当第一次加载文档时，文档大小和窗口大小计算相同，所以{position_x：0.50，position_y：0.50}是窗口500px宽度/高度的50％而不是文档的1200px宽度/高度。如何在设置偏移量之前完全渲染文档大小？

$(function() {
var offset= {
  position_x: 0.5,
  position_y: 0.5
};

var offsetLeft = $(document).width() * offset.position_x;
var offsetTop = $(document).height() * offset.position_y;

$(".square").css({top: offsetTop, left: offsetLeft});
});

.square
{
  height: 100px;
  width: 100px;
  border: 1px solid black;
  position: absolute;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Document Size Test</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
  <div class='square'></div>
</body>
</html>

Answer 1

通常，文档表示整个HTML文档。由于您尝试检索文档的高度，因为只有html窗口可见，所以它给出了浏览器屏幕的大小。但是，如果是窗口，它会以浏览器窗口为目标。最终，两者在首字母都是相同的。

为什么文档大小和窗口大小在加载时相同？

1 个答案: