@kirillleogky

Как функция возвращает bottom координаты элемента относительно документа?

Функция createMessageUnder(elem, html) ниже показывает сообщение под элементом elem.
// получаем координаты элемента в контексте документа
function getCoords(elem) {
    let box = elem.getBoundingClientRect();

    return {
        top: box.top + pageYOffset,
        left: box.left + pageXOffset
    };
}


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

function createMessageUnder(elem, html) {
    // создаём элемент, который будет содержать сообщение
    let message = document.createElement('div');
    // для стилей лучше было бы использовать css-класс здесь
    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;
}

// Использование:
// добавим сообщение на страницу на 5 секунд
let message = createMessageUnder(elem, 'Hello, world!');
document.body.append(message);
setTimeout(() => message.remove(), 5000);


Откуда в этом моменте получено значение coords.bottom , если возвращается только coords.left и coords.top ?
message.style.left = coords.left + "px";
message.style.top = coords.bottom + "px";


Может опечатка? Или всё правильно так как он получает bottom значение?
  • Вопрос задан
  • 102 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы