如何在 div 中获取 div 或图像的位置（顶部和左侧位置）并在 CSS 中使用这些值？答案

【问题标题】：How to Get position of a div or an image in the div (top and left position) and use those values in CSS?如何在 div 中获取 div 或图像的位置（顶部和左侧位置）并在 CSS 中使用这些值？
【发布时间】：2019-03-18 19:23:05
【问题描述】：

我有一个使用引导程序的动态网站。我想在其中创建一个动画，其中 div class="col-md-4" 中的动态缩略图从那里单击缩放到容器中心的 100%。

我要创建一个点击效果来缩放图像，但不是从 div 的位置，而是从页面的中心。我正在尝试定位图像。

x = document.getElementById("Image")

t = x.top;
l = x.left;

function hello() {
x.style.top = x.top + "px";
x.style.left = x.left + "px";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">
  <img id="Image" src="abc.jpg">
  <h2>ABC</h2>
</div>

但没有运气。如果有人可以帮助我。请做。谢谢。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

尝试使用getBoundingClientRect

x.getBoundingClientRect() 它将为您提供元素在文档中的绝对位置。

您可以使用 StackOverflow 获取视口的高度和宽度

从那里您可以获得您正在寻找的正确偏移量。

【讨论】：