Viewing: ar.javascript.info

JavaScript :

** ** : / . clientX / clientY .
** ** : / . pageX / pageY.

/ / . .

() ():

[]

pageY ( ).
` '- ( ) .

: getBoundingClientRect

elem.getBoundingClientRect () elem [DOMRect] (https://www.w3.org/TR/geometry-1/#domrect ) .

DOMRect :

x / y X / Y
/ / ( ).

/ Y /
/ X / .

(y / top / bottom ) .

elem.getBoundingClientRect ():

[]

x / y width / height . :

left = x
top = y
right = x + width
bottom = y + height

10.5. . style.left / top.
. elem elem.getBoundingClientRect (). top .

                   `` (  ) ` ` ( ) `.          .

        " / "      ""                .

  " / "          ""  .

    ""  ""  (    " = -200"  " = -100"):

![](coordinates-negative.svg)

   ` / `  ` x / y`   .

     `elem.getBoundingClientRect ()`   /      ` / `              .

( DomRect.prototype) / x / y / elem.getBoundingClientRect ().

                  ": "  CSS.

   CSS    `right`       ` bottom`    .

            JavaScript  .               .

elementFromPoint (x y)

"document.elementFromPoint (x y) (x y)`.

let elem = document.elementFromPoint(x, y);

let centerX = document.documentElement.clientWidth / 2;
let centerY = document.documentElement.clientHeight / 2;

let elem = document.elementFromPoint(centerX, centerY);

elem.style.background = 'red';
alert(elem.tagName);

```` =" elementFromPoint document.elementFromPoint (x y) "(x y)` .

/ null.

          let elem = document.elementFromPoint(x, y);
// if the coordinates happen to be out of the window, then elem = null
elem.style.background = ''; // Error!
        

          ##   ""

        .

        `getBoundingClientRect`      CSS` position`  `left / top` (` right / bottom`).

      `createMessageUnder (elem html)`    `elem`:

```js
let elem = document.getElementById("coords-show-mark");

function createMessageUnder(elem, html) {
  // create message element
  let message = document.createElement('div');
  // better to use a css class for the style here
  message.style.cssText = "position:fixed; color: red";

  //        "px"!
  let coords = elem.getBoundingClientRect();

  message.style.left = coords.left + "px";
  message.style.top = coords.bottom + "px";

  message.innerHTML = html;

  return message;
}

/// :
//   5   document
let message = createMessageUnder(elem, 'Hello, world!');
document.body.append(message);
setTimeout(() => message.remove(), 5000);
```

```online
Click the button to run it:

<button id="coords-show-mark">Button with id="coords-show-mark", the message will appear under it</button>
```

               CSS " "  .         .

   :          .

 :     ": "           .

           ": ".

##   [#getCoords]

            .

 CSS      ": "        ": "  .

  ": "  " / "               .      .

        .    .

     :
- `pageY` =` clientY` +       .
- `pageX` =` clientX` +       .

  `getCoords (elem)`    `elem.getBoundingClientRect ()`    :


```js
// get document coordinates of the element
function getCoords(elem) {
  let box = elem.getBoundingClientRect();

  return {
    top: box.top + window.pageYOffset,
    right: box.right + window.pageXOffset,
    bottom: box.bottom + window.pageYOffset,
    left: box.left + window.pageXOffset
  };
}
```

      ": "        .

 `createMessageUnder` :

```js
function createMessageUnder(elem, html) {
  let message = document.createElement('div');
  message.style.cssText = "position:absolute; color: red";

  let coords = getCoords(elem);

  message.style.left = coords.left + "px";
  message.style.top = coords.bottom + "px";

  message.innerHTML = html;

  return message;
}
```

## 

      :

1.    - `elem.getBoundingClientRect ()`.
2.    - `elem.getBoundingClientRect ()`     .

     ": "      ": ".

                  CSS `position`` ` ` `.
        

iframe .

JavaScript .

. .

DOM :

( ).
( ).
( ).
( ).

. .

sandbox .

[elem.getBoundingClientRect ()] (https://developer.mozilla.org/en-US/docs/DOM/element.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
];
        

sandbox.

()

(): ( ) .

top-out right-out bottom-out elem over / right / under anchor.
: / / .

          // shows the note above blockquote
positionAt(blockquote, "top-out", note);

// shows the note inside blockquote, at the top
positionAt(blockquote, "top-in", note);
        

().

sandbox.