Question

我有一个高度为500px的div。这是主div，在这个div中我想知道div中当前行/ div / html元素的位置偏移量。

让我用图片解释一下：

假设我在Div 2中。我可以知道这个div中任何一点的偏移内容有多少像素？

这是我的示例标记：

<div class="main" style='height:500px'>

    <div id="div1">
    </div>
    <div id="div2">
    </div>
    <div id="div3">
    </div>

</div>

编辑：

主div中的所有div由于其中的动态内容而具有可变高度。

Answer 1

要知道相对于容器的偏移量值，您可以使用position()：

将父级设置为position：relative
非常重要

＆＃13;

console.log($('#div2').position())
console.log($('#div2').offset())

＆＃13;

.main {background:purple;margin:30px;position:relative}
#div1 {height:150px;}
#div2 {height:3px;background:yellow}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="main" style='height:500px'>
    <div id="div1">
    </div>
    <div id="div2">
    </div>
    <div id="div3">
    </div>
</div>

＆＃13;

Answer 2

您可以使用将返回的jQuery position()方法和包含元素相对于另一个元素位置的对象。

var position = $('#div2').position();
console.log(position);

#main{
    position: absolute;
}
#div1,
#div2,
#div3 {
  position: absolute;
  height: 50px;
  width: 500px;
}


   #div1 {
  top: 0;
  background-color: yellow;
}

#div2 {
  top: 75px;
  background-color: green;
}

#div3 {
  top: 150px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main" style='height:500px; background-color:red;'>

  <div id="div1">
  </div>
  <div id="div2">
  </div>
  <div id="div3">
  </div>

</div>

Answer 3

查看jQuery中的.position()函数。但它不会考虑隐藏的元素。

alert($("#four").position().top);

#one {
  background-color: lightblue
}
#two {
  background-color: red
}
#three {
  background-color: lightgreen
}
#four {
  background-color: lightgreen
}
#five {
  background-color: lightgreen
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div id="one">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div id="two">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

    <div id="three">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <div id="four">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <div id="five">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
</body>

</html>

Answer 4

此解决方案允许您在不设置的情况下检查相对高度 position：相对于容器。

jQuery提供了一个名为offset（）的函数，可以让你看到x＆amp; y任何元素相对于屏幕左上角的位置（x：0，y：0）。要确定元素相对于其容器的高度，可以从元素y坐标中减去容器y坐标。

＆＃13;

var div_one_top = $("#div1").offset().top
var div_main_top = $("div.main").offset().top
var div_one_to_main_top = div_one_top - div_main_top

$("#div1").text("#Div1 top relatative to the DOCUMENT: " + div_one_top)
$("#div2").text(".main top relatative to the DOCUMENT: " + div_main_top)
$("#div3").text("#Div1 top relatative to the div.main: " + div_one_to_main_top)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main" style='height:500px; padding:20px; position:absolute; left:22px; top: 45px'>

    <div id="div1">
    </div>
    <div id="div2">
    </div>
    <div id="div3">
    </div>

</div>

＆＃13;

是否可以在div中获取当前高度偏移量？

4 个答案: