Пятница, 11 Января 2013 16:26

Определить координаты блока при помощи JavaScript

Written by 
Оцени эту запись
(3 Голоса)

Для определения основных координат элемента при помощи JavaScript есть полезные свойства offsetWidth, offsetHeight, offsetTop и offsetLeft. Я ими часто пользуюсь.

 

 

Создадим какой-то блок и попробуем определить для него нужные координаты.

 

<div style="background: violet; color: blue;" class="coord">

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic

</div>

 

 

Пишем простой скрипт, который при нажатии на блок выдаст alert с координатами элемента:

 

 

<script>

function Coord() {

var a = document.getElementsByClassName('coord')[0];

a.addEventListener('click', function () {

alert(

'elem height = '+a.offsetHeight+', elem width = '+a.offsetWidth+', elem top = '+a.offsetTop+', elem left = '+a.offsetLeft

);

});

}

Coord();

</script>

 

 

Осталось только кликнуть на блок:

 

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic

 

 

Координаты определяются относительно родительского элемента.

 

 

 
 
 

Additional Info

Добавить комментарий


Защитный код
Обновить

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов