将对象的位置设置为自身的内联样式？答案

【问题标题】：Set the position of an object as an inline style to itself?将对象的位置设置为自身的内联样式？
【发布时间】：2013-05-16 14:27:18
【问题描述】：

我正在尝试构建 8 个 div 的响应式设计。我需要这些 div 具有内联 CSS 样式的绝对定位，具有左侧和顶部位置。为了保持响应，我不能用 CSS 定位它们。

我想等到 div 加载完毕，然后使用 jQuery 来获取这些 div 的位置，然后将该信息传递回它们各自的内联样式中。

如果我使用准备好的文档，它会将 left:0, right:0 应用于我的所有 div。如果我使用文档加载，它根本不会触发代码。

$(document).ready(function(){
  $("div.item").each(function(i, obj) {
    var posfix = $(this).position();
    var getW = $(this).width();
    var getH = $(this).height();
    $(this).children().text( "left: " + posfix.left + ", top: " + posfix.top );//test
    $(this).children().append( "height: " + getH + ", width: " + getW );//test
    $(this).css({position: 'absolute',left:posfix.left,top:posfix.top,width:getW,height:getH});//set
   });
});

测试代码在这里jsFiddle

【问题讨论】：

在为每个 div 提供唯一 ID 的帮助下尝试。您可以轻松分配 css。在你的情况下，每个 div 都有相同的类名。
你在哪里计算新位置？正如我所看到的，div 从 0px （默认）开始，您正在重新分配相同的值。
@Vaibhav Jain - 我基本上一遍又一遍地重复相同的动作，这就是为什么我使用单个类名来重复而不必为每个单独的 ID 编写代码。
@Mangiucugna - 这是代码运行时的初始问题，它为每个 div 返回一个 0px/0px。我可以执行 .text() 来测试代码，它会正常工作。

标签： jquery css css-position

【解决方案1】：

试试这个：

$(window).load(function()
{
  //your code here
});

没有文档加载之类的东西。 :)

您可能还想尝试 offset()，它返回相对于文档的位置（postion() 返回相对于 parent 的位置。

欲了解更多信息，请查看 - offset

【讨论】：

如果我使用 window.load，它会返回与 doc.ready 相同的问题。我将研究偏移量，看看它是否提供了正确的解决方案。感谢您对文档加载的更正。
您使用 .offset() 是正确的，它返回了所需的正确信息。然而，主要问题仍然是像文本脚本一样将代码应用于每个单独的元素。