42 lines
1.2 KiB
Markdown
42 lines
1.2 KiB
Markdown
# Outer corners
|
|
|
|
Outer corners are basically what we get from [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect).
|
|
|
|
Coordinates of the upper-left corner `answer1` and the bottom-right corner `answer2`:
|
|
|
|
```js
|
|
let coords = elem.getBoundingClientRect();
|
|
|
|
let answer1 = [coords.left, coords.top];
|
|
let answer2 = [coords.right, coords.bottom];
|
|
```
|
|
|
|
# Left-upper inner corner
|
|
|
|
That differs from the outer corner by the border width. A reliable way to get the distance is `clientLeft/clientTop`:
|
|
|
|
```js
|
|
let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];
|
|
```
|
|
|
|
# Right-bottom inner corner
|
|
|
|
In our case we need to substract the border size from the outer coordinates.
|
|
|
|
We could use CSS way:
|
|
|
|
```js
|
|
let answer4 = [
|
|
coords.right - parseInt(getComputedStyle(field).borderRightWidth),
|
|
coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth)
|
|
];
|
|
```
|
|
|
|
An alternative way would be to add `clientWidth/clientHeight` to coordinates of the left-upper corner. That's probably even better:
|
|
|
|
```js
|
|
let answer4 = [
|
|
coords.left + elem.clientLeft + elem.clientWidth,
|
|
coords.top + elem.clientTop + elem.clientHeight
|
|
];
|
|
```
|