如何使用 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', () => {

  console.log(document.querySelectorAll('.containt')[1].getBoundingClientRect().left - document.querySelectorAll('.containt')[0].clientWidth);

})

.container {

  width: 400px;

  height: 200px;

  background-color: orange;

  display: flex;

  justify-content: space-between;

}

.containt {

  width: 50px;

  height: 50px;

  background-color: blue;

}

<div class=container>

<div class="containt">

</div>

<div class="containt">

</div>

<div class="containt">

</div>

</div>

Answer 2

在这里我找到了如何测量元素 之间的距离测量两个 HTML 元素中心之间的距离

 function getPositionAtCenter(element) {

   const {top, left, width, height} = element.getBoundingClientRect();

   return {

     x: left + width / 2,

     y: top + height / 2

   };

 }

function getDistanceBetweenElements(a, b) {

  const aPosition = getPositionAtCenter(a);

  const bPosition = getPositionAtCenter(b);

  return Math.hypot(aPosition.x - bPosition.x, aPosition.y - bPosition.y);  

}

const distance = getDistanceBetweenElements(

  document.getElementById("x"),

  document.getElementById("y")

);

console.log(distance)

<div id="x"></div>

<div id="y" style="margin-left:100px;"></div>

Answer 3

$(document).ready(()=>{

            let current_item_children = $("div.sec").find('img');

            let 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(),

                    }

                );

                console.log(children);

                });

        });

试试这个功能