javascript - 从 <img> 到包含的 div 底部的距离(像素)

Question

我有一个包含一些图像的 div。图像的样式显示在垂直列中:

.side_gallery img {
    display: block;
    margin: 3px 5px;
    padding: 0;
    border: 1px solid #aaa;
}

我有一个 JavaScript 函数，可以循环这些图像并调整它们。我想要一种简单的方法来计算从每个图像的底部到包含 <div> 的底部的距离(以像素为单位) .

Answer 1

您将需要获取 div 的高度 (yourDiv.offsetHeight)、图像的位置 (yourImage.offsetTop)、图像的高度图像 (yourImage.offsetHeight)，然后应用一点数学运算。

var div = document.getElementById('myDiv');
var image = document.getElementById('myImage');
var bottom = (div.offsetHeight) - (img.offsetTop + img.offsetHeight);

Here is an example.

我希望这对您有所帮助。