第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

如何使用 JavaScript 計(jì)算 Flex 容器內(nèi)元素之間的距離 JavaScript

如何使用 JavaScript 計(jì)算 Flex 容器內(nèi)元素之間的距離 JavaScript

嗶嗶one 2022-12-09 19:11:38
我需要計(jì)算彈性項(xiàng)目的子項(xiàng)的左右邊距<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>我試圖循環(huán)遍歷孩子，但它只給了我孩子的寬度，我需要寬度和邊距筆記$(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貢獻(xiàn)1863條經(jīng)驗(yàn) 獲得超2個(gè)贊

像素中第一個(gè)和第二個(gè)元素之間的距離：


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>


查看完整回答
反對 回復(fù) 2022-12-09
?
溫溫醬

TA貢獻(xiàn)1752條經(jīng)驗(yàn) 獲得超4個(gè)贊

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


查看完整回答
反對 回復(fù) 2022-12-09
?
嚕嚕噠

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超7個(gè)贊

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

                });

        });

試試這個(gè)功能


查看完整回答
反對 回復(fù) 2022-12-09
  • 3 回答
  • 0 關(guān)注
  • 110 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)