Пятница, 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

You have no rights to post comments

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