Вопросы по задачке JS(расположение элемента):?
Надо расположить текст, который вводится через prompt - справа внизу от основного элемента(текста на зелёном фоне) Расположить абсолютно, относительно документа, а не окна браузера.
Вроде у меня +- получилось, но есть вопросы:
1) Надо чтобы нижняя граница текста быра вровень с нижней границей элемента. А у меня он смещён вниз. Я думал "- text.offsetHeight" поможет, но нет(50 строка)
2) Когда уменьшается размер самого элемента, текст не остаётся справа внизу. Видно на послденем скрине. Так и должно быть? Я думал, что он будет "прикреплён" к правой нижней точке при любых размерах элемента
3) Ну и я не пойму как сделать мигание текста через setInterval(). Там же для этого надо какую-то функцию внутри прописать
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. In voluptates accusamus saepe esse quae quam at. Modi quia, aliquam nulla dolorum similique quos pariatur vel alias facere optio rerum nostrum. nulla dolorum similique quos pariatur vel alias facere optio rerum nostrum.nulla dolorum similique quos pariatur vel alias facere optio rerum nostrum. </p> <style> body{ background: #d8ffe1; height: 1000px; } p{ background: lawngreen; text-transform: uppercase; max-width: 30%; } </style> |
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. In voluptates accusamus saepe esse quae quam at. Modi quia, aliquam nulla dolorum similique quos pariatur vel alias facere optio rerum nostrum. nulla dolorum similique quos pariatur vel alias facere optio rerum nostrum.nulla dolorum similique quos pariatur vel alias facere optio rerum nostrum. </p> <style> body{ background: #d8ffe1; height: 1000px; } p{ background: lawngreen; text-transform: uppercase; max-width: 30%; } </style>
// Задача: Абсолютно расположить текст относительно документа(а не окна браузера) справа внизу от элемента(текст на зелёном фоне) function getAbsoluteCoords(elem){ let absoluteCoords = elem.getBoundingClientRect() return{ top: absoluteCoords.top + window.pageYOffset, right: absoluteCoords.right + window.pageXOffset, // left: absoluteCoords.left + window.pageXOffset, // bottom: absoluteCoords.bottom + window.pageYOffset, } } let elem = document.querySelector('p') function newText(){ let text = document.createElement('div') text.style.cssText = 'position: absolute; color: orange; text-transform: uppercase' let htmlText = prompt('Введите какое сообщение будет показано: ') text.innerHTML = htmlText let coords = getAbsoluteCoords(elem) text.style.top = coords.bottom - text.offsetHeight + 'px' // нижняя граница текста должна быть на уровне ниж. границы зелён. поля text.style.left = coords.right + 'px' return text } let text = newText() document.querySelector('p').append(text) // setInterval(() => text.remove(), 1000) как сделать мигание Текста? |
// Задача: Абсолютно расположить текст относительно документа(а не окна браузера) справа внизу от элемента(текст на зелёном фоне) function getAbsoluteCoords(elem){ let absoluteCoords = elem.getBoundingClientRect() return{ top: absoluteCoords.top + window.pageYOffset, right: absoluteCoords.right + window.pageXOffset, // left: absoluteCoords.left + window.pageXOffset, // bottom: absoluteCoords.bottom + window.pageYOffset, } } let elem = document.querySelector('p') function newText(){ let text = document.createElement('div') text.style.cssText = 'position: absolute; color: orange; text-transform: uppercase' let htmlText = prompt('Введите какое сообщение будет показано: ') text.innerHTML = htmlText let coords = getAbsoluteCoords(elem) text.style.top = coords.bottom - text.offsetHeight + 'px' // нижняя граница текста должна быть на уровне ниж. границы зелён. поля text.style.left = coords.right + 'px' return text } let text = newText() document.querySelector('p').append(text) // setInterval(() => text.remove(), 1000) как сделать мигание Текста?
Ну и вообще это нормальный способ решить эту задачу или есть проще?
Дополнительно:
Тебе точно нужно использовать js а не css? Бессмыслица какая-то - использовать джаваскрипт чтобы прописать стили элемента.
По второму пункту - если у тебя позиция абсолют, то ожидать отзывчивости не стоит. Код устанавливает позицию для текущего размера элемента - на этом все. Чтобы в данном случае получить отзывчивость - нужно запускать функцию для установки размера при кажджом изменении размера элемента. ПОВТОРЮ - с реальной жизнью тут я не вижу ничего общего, все это делается стилями. Я в примере использовал обсервер, но можно и придумать другое решение.
По поводу пункта три -
пример решения в песочнице.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы решить проблему с расположением элемента на странице с помощью JavaScript, можно использовать различные методы и свойства, такие как `getElementById`, `querySelector`, `getBoundingClientRect` и другие.
Прежде всего, необходимо определить элемент, который нужно расположить. Для этого можно использовать методы `getElementById` или `querySelector`, чтобы получить доступ к нужному элементу по его id или селектору.
Например, если у вас есть элемент с id "myElement", то можно получить его следующим образом:
var element = document.getElementById("myElement");
Затем, чтобы узнать текущие координаты элемента на странице, можно воспользоваться методом `getBoundingClientRect`, который возвращает объект с координатами элемента, такими как `top`, `right`, `bottom`, `left`, `width`, `height`. Например:
var rect = element.getBoundingClientRect(); console.log("Top: " + rect.top + ", Left: " + rect.left);
Теперь, имея доступ к координатам элемента, можно произвести необходимые операции с ним, например, изменить его положение на странице, добавив или удалив определенное количество пикселей к его текущим координатам.
Таким образом, используя JavaScript и соответствующие методы для работы с элементами на странице, можно управлять их расположением и выполнить необходимые действия для решения задачи.