找出欄位的視窗座標
重要性：5
在下方 iframe 中，你可以看到一個有綠色「欄位」的文件。
使用 JavaScript 找出由箭頭指向的角落的視窗座標。
文件中有實作一個小功能以方便使用。在任何地方按一下都會顯示座標。
你的程式碼應使用 DOM 來取得下列視窗座標：
- 左上角，外側角落（很簡單）。
- 右下角，外側角落（也很簡單）。
- 左上角，內側角落（稍微難一點）。
- 右下角，內側角落（有數種方法，選一種）。
你計算出的座標應與滑鼠按一下時回傳的座標相同。
附註：如果元素有其他大小或邊框，不受任何固定值約束，則程式碼也應可正常運作。
外角
外角基本上就是我們從 elem.getBoundingClientRect() 取得的結果。
左上角座標 answer1 和右下角座標 answer2
let coords = elem.getBoundingClientRect();
let answer1 = [coords.left, coords.top];
let answer2 = [coords.right, coords.bottom];左上內角
這與外角的差異在於邊框寬度。取得距離的可靠方法是 clientLeft/clientTop
let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];右下內角
在我們的案例中，我們需要從外座標中減去邊框大小。
我們可以使用 CSS 方法
let answer4 = [
coords.right - parseInt(getComputedStyle(field).borderRightWidth),
coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth)
];另一種方法是將 clientWidth/clientHeight 加到左上角座標。這可能更好
let answer4 = [
coords.left + elem.clientLeft + elem.clientWidth,
coords.top + elem.clientTop + elem.clientHeight
];