フィールドのウィンドウ座標を見つける
重要度: 5
以下のiframeには緑色の「フィールド」を含むドキュメントが表示されます。
JavaScriptを使用して、矢印で示されたコーナーのウィンドウ座標を見つけてください。
利便性の向上のため、ドキュメントに小さな機能が実装されています。任意の場所をクリックすると、座標が表示されます。
コードはDOMを使用して以下のウィンドウ座標を取得する必要があります。
- 左上、外側のコーナー（簡単です）。
- 右下、外側のコーナー（それも簡単です）。
- 左上、内側のコーナー（少し難しいです）。
- 右下、内側のコーナー（方法はいくつかありますが、そのうちの1つを選択してください）。
計算した座標は、マウスクリックによって返される座標と同じである必要があります。
追伸 コードは、要素に別のサイズやボーダーがあって、固定値にバインドされていない場合にも機能する必要があります。
外側の角
外側の角は基本的に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
];