鍍金池/ 問答/Java  PHP  Python  HTML/ 如何獲取得到相對于父元素的偏移(x,y),如下圖和代碼

如何獲取得到相對于父元素的偏移(x,y),如下圖和代碼

問題

如下圖，藍色框根據(jù)紅色框，得到相對于紅色框左上角的偏移(x,y)
clipboard.png

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    .box {
        width: 1200px;
        padding: 50px;
        box-sizing: border-box;
        border: 1px solid #ff0000;
    }
    
    .box-item {
        display: flex;
        padding: 20px;
        box-sizing: border-box;
        border: 1px solid #ccc;
    }
    
    .box-item .item-left {
        flex: 1;
    }
    
    .box-item .item-right {
        flex: 0 0 150px;
        width: 150px;
        height: 50px;
        box-sizing: border-box;
        border: 1px solid #00aaee;
    }
</style>

</head>

<body>

<div class="box">
    <div class="box-item">
        <div class="item-left">aa</div>
        <div class="item-right"></div>
    </div>
    <div class="box-item">
        <div class="item-left">bb</div>
        <div class="item-right"></div>
    </div>
    <div class="box-item">
        <div class="item-left">cc</div>
        <div class="item-right"></div>
    </div>
</div>

</body>

</html>
<script type="text/javascript">

function doPrint() {

    window.print();
}

</script>

回答
編輯回答
笑忘初

$("").position().left
$("").position().top
紅色框樣式需要position:relative

2017年12月6日 18:33
編輯回答
北城荒

思路

  1. 獲取紅框的位置信息
  2. 獲取籃框的位置信息
  3. 求得差值就是籃框相對于紅框的相對位置 也就是樓主需要的偏移信息。

給你寫個方法吧

/**
* 獲取倆個元素的相對位置
* @param a dom元素1 
* @param b dom元素2
* @return b元素相對于a元素的位置偏差
*/
getOffsetXY(a,b){
 let aRect = a.getBoundingClientRect()
 let bRect = b.getBoundingClientRect()
 return {
    x: bRect.left - aRect.left,
    y: bRect.top - aRect.top
 }
}
let redBox = document.querySelector('.box')
// 獲取其中第一個item-right盒子
let blueBox = document.querySelectorAll('.item-right')[0]
let {x,y} = getOffsetXY(redBox,blueBox)
2018年2月28日 01:50