如何使用 JavaScript 计算 Flex 容器内元素之间的距离 JavaScript

Question

我需要计算弹性项目的子项的左右边距

<div class="sec images" style="display:flex;justify-content:space-between">

  <img src="images/en_mb-mega-01.png" alt="">

  <img src="images/en_mb-mega-03.png" alt="">

  <img src="images/en_mb-mega-04.png" alt="">

</div>

我试图循环遍历孩子，但它只给了我孩子的宽度，我需要宽度和边距

笔记

$(element).width()

没用

main.js file :

  var current_item_children = current_item.children();

$.each(current_item_children, function () {

  var this_item = $(this);

  children.push(

    {

      width: this_item.width(),

      outerWidth:this_item.outerWidth(false),

      height: this_item.height(),

    }

  );

});

Answer 1

像素中第一个和第二个元素之间的距离：window.addEventListener('load', () => {&nbsp; console.log(document.querySelectorAll('.containt')[1].getBoundingClientRect().left - document.querySelectorAll('.containt')[0].clientWidth);}).container {&nbsp; width: 400px;&nbsp; height: 200px;&nbsp; background-color: orange;&nbsp; display: flex;&nbsp; justify-content: space-between;}.containt {&nbsp; width: 50px;&nbsp; height: 50px;&nbsp; background-color: blue;}<div class=container><div class="containt"></div><div class="containt"></div><div class="containt"></div></div>

Answer 2

在这里我找到了如何测量元素&nbsp;之间的距离测量两个 HTML 元素中心之间的距离&nbsp;function getPositionAtCenter(element) {&nbsp; &nbsp;const {top, left, width, height} = element.getBoundingClientRect();&nbsp; &nbsp;return {&nbsp; &nbsp; &nbsp;x: left + width / 2,&nbsp; &nbsp; &nbsp;y: top + height / 2&nbsp; &nbsp;};&nbsp;}function getDistanceBetweenElements(a, b) {&nbsp; const aPosition = getPositionAtCenter(a);&nbsp; const bPosition = getPositionAtCenter(b);&nbsp; return Math.hypot(aPosition.x - bPosition.x, aPosition.y - bPosition.y);&nbsp;&nbsp;}const distance = getDistanceBetweenElements(&nbsp; document.getElementById("x"),&nbsp; document.getElementById("y"));console.log(distance)<div id="x"></div><div id="y" style="margin-left:100px;"></div>

Answer 3

$(document).ready(()=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let current_item_children = $("div.sec").find('img');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let children = [];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.each(current_item_children, function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var this_item = $(this);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; children.push(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: this_item.width(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; outerWidth:this_item.outerWidth(false),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: this_item.height(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(children);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });试试这个功能