首頁猿問如何使用 JavaScript...

如何使用 JavaScript 計算 Flex 容器內元素之間的距離 JavaScript

JavaScript

嗶嗶one 2022-12-09 19:11:38

我需要計算彈性項目的子項的左右邊距<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(), } );});

查看完整描述

3 回答

小唯快跑啊

TA貢獻1863條經驗獲得超2個贊

像素中第一個和第二個元素之間的距離：

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>

</div>

</div>

反對回復 2022-12-09

溫溫醬

TA貢獻1752條經驗獲得超4個贊

在這里我找到了如何測量元素之間的距離測量兩個 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)

反對回復 2022-12-09

嚕嚕噠

TA貢獻1784條經驗獲得超7個贊

$(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);

});

試試這個功能

反對回復 2022-12-09

3 回答
0 關注
112 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用 JavaScript 計算 Flex 容器內元素之間的距離 JavaScript

如何使用 JavaScript 計算 Flex 容器內元素之間的距離 JavaScript

3 回答

添加回答