Javascript 从图像右边框到图像右边框的距离'；s父分区

我想确定从图像2的右边框到图像父div的右边框的距离

//The images will be aligned horizontally as in the image bellow
<div class = "parent-div">
    <img src "img01.jpg" />
    <img src "img02.jpg" />
    <img src "img03.jpg" />
    <img src "img04.jpg" />
    <img src "img05.jpg" />
</div>

下图中的示例，在JQuery或JavaScript中，从图2的右边框到父div的右边框的距离是多少？

作为，

元素。getBoundingClientRect（）

将获取元素相对于视口的位置，以及一些其他值，如其自身的宽度和高度。使用后者，您可以设置容器的宽度和高度

然后，获取子图像的值，您可以计算该值

var containerell=document.querySelector（'.parent div'）；
var containererect=containerell.getBoundingClientRect（）；
var containerElWidth=containerElRect.width；
//这将选择所有img元素
var imgElements=containeerl.queryselectoral（'img'）；
//这将选择第二个图像
var imgEl=imgElements[1]；
var imgElRect=imgEl.getBoundingClientRect（）；
var imgElWidth=imgElRect.width；
//这是从图像左边框到容器左边框的偏移
var imgElOffsetLeft=imgEl.offsetLeft；
//计算您搜索的值：
var theDistance=容器宽度-imgElWidth-imgElOffsetLeft；
console.log（距离）
.parent div{
/*这对“imgEl.offsetLeft”的工作非常重要！
使用offsetParent查找最近的定位父对象*/
位置：相对位置；
宽度：400px；
空白：nowrap；
边框：1px纯红；
/*仅用于消除图像之间的空格*/
字号：0；
溢出y：滚动；
}
.parent div>img{
宽度：100px；
}

您指的是填充区域吗？是的，填充区域，例如来自图像2getBoundingClientRect的填充区域应该会有帮助@Hans我已经尝试了
getBoundingClientRect（）位于您提供的链接。经过几个小时的讨论，我还没有理解它。虽然父div的宽度是
470px
，但当我使用
getBoundingClientRect（）时我得到了例如
左：683。
我如何准确使用
getBoundingClientRect（）在我的情况下，是否可以获得我正在寻找的答案？
.parent-div{
    width: 400px;
    overflow: hidden;
}

.parent-div > img{
    width:100px;
}