Как при клике получить координаты элемента относительно блока в котором он находится ? Без jQuery.
Узнать top и left с картинки. Относительно блока center. При клике на синий квадрат.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуБез jQuery можно на JavaScript:
function position() {
var obj = document.getElementById('inside'); // берем интересующий элемент
var posX = obj.offsetTop; // верхний отступ эл-та от родителя
var posY = obj.offsetLeft; // левый отступ эл-та от родителя
console.log('x=[' + posX + '] y=[' + posY + ']'); // печатаем координаты
}
.center {
height: 200px;
width: 300px;
}
.inside {
position: absolute;
margin-top: 55px;
margin-left: 51px;
height: 10px;
width: 10px;
background: blue;
}
<body>
<div class="center">
<div id="inside" class="inside" onclick="position();">
</div>
</div>
</body>
Если посмотреть на позиционирование элемента:
Верх: 55 + 8 = 63
Лево: 51 + 8 = 59
Что и получили в результате: x=[63] y=[59]
Ссылки для ознакомления:
С использованием jQuery:
Для получения текущего положения относительно родительского элемента - можно использовать position
. position() - получает значение позиции элемента top и left относительно отступов его родителя. Также, есть метод offset для получения текущих координат элемента по отношению к документу. С помощью .offset() и .position() функций, можно узнавать координаты элемента на странице. Кроме этого, с помощью offset(), можно изменить координаты элемента. Имеется несколько вариантов использования функций, подробнее по ссылке: Позиция элемента.