Что за массив result, точнее непонятно как мы получили эти координаты?

Question

[olya_097]

Что за массив result, точнее непонятно как мы получили эти координаты?
При помощи JavaScript найдите координаты указанных стрелками углов относительно окна браузера.

plnkr.co/edit/ryy56nfkFB7RDzw0TrBn?p=preview

Comments

[twobomb]

Ну вот здесь получили

var fieldCoords = field.getBoundingClientRect();

    var result = [
      [ // 1
        fieldCoords.left,
        fieldCoords.top
      ],
      [ // 2
        fieldCoords.right,
        fieldCoords.bottom
      ],
      [ // 3
        fieldCoords.left + field.clientLeft,
        fieldCoords.top + field.clientTop
      ],
      [ // 4
        fieldCoords.left + field.clientLeft + field.clientWidth,
        fieldCoords.top + field.clientTop + field.clientHeight
      ]
    ];

[olya_097]

twobomb, это да ,что значит

[ // 3
fieldCoords.left + field.clientLeft,
fieldCoords.top + field.clientTop
],
[ // 4
fieldCoords.left + field.clientLeft + field.clientWidth,
fieldCoords.top + field.clientTop + field.clientHeight
]

Answer 1

[twobomb]

fieldCoords.left + field.clientLeft = позиция от левой границы окна + ширина границы элемента ( например border:4px solid red;, clientLeft = 4)

fieldCoords.left + field.clientLeft + field.clientWidth= позиция от левой границы окна +ширина границы элемента + ширина элемента

Comments

[olya_097]

а [ // 1
fieldCoords.left,
fieldCoords.top
],
[ // 2
fieldCoords.right,
fieldCoords.bottom
],

[twobomb]

olya_097, Ну это свойства вызванного выше getBoundingClientRect()
Можете тут почитать

[olya_097]

twobomb, это да,но какие именно?что значат

[twobomb]

olya_097, Да я же кинул ССЫЛКУ, показал даже картинкой где что значит, все предельно ясно написано.
top – Y-координата верхней границы элемента,
left – X-координата левой границы,
right – X-координата правой границы,
bottom – Y-координата нижней границы.

Answer 2

[Stalker_RED]

По вашей ссылке описана задача, и она же решена. В тексте, который выводится при помощи alert перечислены координаты четырех углов, отмеченных стрелками.

getBoundingClientRect()

Возвращаемое значение — это объект TextRectangle, содержащий свойства только для чтения left, top, right и bottom, описывающие бокс с границами в пиксельном измерении. Значения top и left даются относительно верхнего левого угла порта просмотра.

Про вьюпорт неплохо описано здесь https://www.quirksmode.org/mobile/viewports.html
(там есть еще и вторая часть).