Retrieve the position (X,Y) of an HTML element
I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript.
32 Answers 32
Internet Explorer has supported this since as long as you are likely to care about and it was finally standardized in CSSOM Views. All other browsers adopted it a long time ago.
Some browsers also return height and width properties, though this is non-standard. If you’re worried about older browser compatibility, check this answer’s revisions for an optimised degrading implementation.
The values returned by element.getBoundingClientRect() are relative to the viewport. If you need it relative to another element, simply subtract one rectangle from the other:
This function returns an element’s position relative to the whole document (page):
Using this we can get the X position:
. or the Y position:
The libraries go to some lengths to get accurate offsets for an element.
here’s a simple function that does the job in every circumstances that I’ve tried.
If you want it done only in javascript, here are some one liners using getBoundingClientRect()
The first line will return offsetTop say Y relative to document. The second line will return offsetLeft say X relative to document.
getBoundingClientRect() is a javascript function that returns the position of the element relative to viewport of window.
HTML elements on most browsers will have:-
These specifiy the position of the element relative its nearest parent that has layout. This parent can often be accessed bif the offsetParent property.
IE and FF3 have
These properties are less common, they specify an elements position with its parents client area (padded area is part of the client area but border and margin is not).
If page includes — at least- any «DIV», the function given by meouw throws the «Y» value beyond current page limits. In order to find the exact position, you need to handle both offsetParent’s and parentNode’s.
Try the code given below (it is checked for FF2):
You can add two properties to Element.prototype to get the top/left of any element.
This is called like this:
Here’s a demo comparing the results to jQuery’s offset().top and .left : http://jsfiddle.net/ThinkingStiff/3G7EZ/
To retrieve the position relative to the page efficiently, and without using a recursive function: (includes IE also)
How about something like this, by passing ID of the element and it will return the left or top, we can also combine them:
1) find left
2) find top
or 3) find left and top together
Here’s a modern 1-liner using vanilla JS to recursively iterate over element.offsetTop and element.offsetParent :
Function:
Usage:
Advantage:
Always returns the absolute vertical offset, regardless of the current scroll position.
Traditional syntax:
Update:
The recursion approach (in my old answer) creates many call stacks. We can use a while loop to avoid recursion in this case:
Old answer:
Thank ThinkingStiff for the answer, this is only another version.
jQuery .offset() will get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.
You might be better served by using a JavaScript framework, that has functions to return such information (and so much more!) in a browser-independant fashion. Here are a few:
With these frameworks, you could do something like: $(‘id-of-img’).top to get the y-pixel coordinate of the image.
I’ve taken @meouw’s answer, added in the clientLeft that allows for the border, and then created three versions:
getAbsoluteOffsetFromBody — similar to @meouw’s, this gets the absolute position relative to the body or html element of the document (depending on quirks mode)
getAbsoluteOffsetFromGivenElement — returns the absolute position relative to the given element (relativeEl). Note that the given element must contain the element el, or this will behave the same as getAbsoluteOffsetFromBody. This is useful if you have two elements contained within another (known) element (optionally several nodes up the node tree) and want to make them the same position.
getAbsoluteOffsetFromRelative — returns the absolute position relative to the first parent element with position: relative. This is similar to getAbsoluteOffsetFromGivenElement, for the same reason but will only go as far as the first matching element.
If you are still having problems, particularly relating to scrolling, you could try looking at http://www.greywyvern.com/?post=331 — I noticed at least one piece of questionable code in getStyle which should be fine assuming browsers behave, but haven’t tested the rest at all.
Difference between small and little
If you are using jQuery, this could be a simple solution:
if using jQuery, the dimensions plugin is excellent and allows you specify exactly what you want.
Relative position, absolute position, absolute position without padding, with padding.
It goes on, let’s just say there is a lot you can do with it.
Plus the bonus of using jQuery is it’s lightweight file size and easy use, you won’t go back to JavaScript without it afterwards.
This is the best code I’ve managed to create (works in iframes as well, unlike jQuery’s offset()). Seems webkit has a bit of a different behavior.
Based on meouw’s comment:
The cleanest approach I have found is a simplified version of the technique used by jQuery’s offset . Similar to some of the other answers it starts with getBoundingClientRect ; it then uses the window and the documentElement to adjust for scroll position as well as things like the margin on the body (often the default).
To get the total offset of an element, you could recursively sum up all parent offsets:
with this utility function the total top offset of a dom element is:
While this is very likely to be lost at the bottom of so many answers, the top solutions here were not working for me.
As far as I could tell neither would any of the other answers have helped.
Situation:
In an HTML5 page I had a menu that was a nav element inside a header (not THE header but a header in another element).
I wanted the navigation to stick to the top once a user scrolled to it, but previous to this the header was absolute positioned (so I could have it overlay something else slightly).
The solutions above never triggered a change because .offsetTop was not going to change as this was an absolute positioned element. Additionally the .scrollTop property was simply the top of the top most element. that is to say 0 and always would be 0.
Any tests I performed utilizing these two (and same with getBoundingClientRect results) would not tell me if the top of the navigation bar ever scrolled to the top of the viewable page (again, as reported in console, they simply stayed the same numbers while scrolling occurred).
Solution
The solution for me was utilizing
The value of the pageTop property reflects the viewable section of the screen, therefore allowing me to track where an element is in reference to the boundaries of the viewable area.
Probably unnecessary to say, anytime I am dealing with scrolling I expect to use this solution to programatically respond to movement of elements being scrolled.
Hope it helps someone else.
IMPORTANT NOTE: This appears to work in Chrome and Opera currently & definitely not in Firefox (6-2018). until Firefox supports visualViewport I recommend NOT using this method, (and I hope they do soon. it makes a lot more sense than the rest).
UPDATE:
Just a note regarding this solution.
While I still find what I discovered to be very valuable for situations in which «. programmatically respond to movement of elements being scrolled.» is applicable. The better solution for the problem that I had was to use CSS to set position: sticky on the element. Using sticky you can have an element stay at the top without using javascript (NOTE: there are times this will not work as effectively as changing the element to fixed but for most uses the sticky approach will likely be superior)
UPDATE01:
So I realized that for a different page I had a requirement where I needed to detect the position of an element in a mildly complex scrolling setup (parallax plus elements that scroll past as part of a message). I realized in that scenario that the following provided the value I utilized to determine when to do something:
Карты-изображения в HTML
Карта изображений — это графический объект языка разметки HTML, связанный с изображением и содержащий специальные области (активные зоны), при нажатии на которые происходит переход по определённому (URL) (при помощи javascript можно установить другие действия). Использование карт изображений позволяет хранить несколько ссылок в одном изображении.
Для добавления карты изображений на Web -страницу используется парный HTML -тег <map>, в атрибуте name которого указывается уникальный в пределах документа идентификатор карты. Внутрь него добавляются непарные теги <area>, каждый из которых описывает одну активную зону. Затем в тег , который необходимо связать с картой, добавляется атрибут usemap , содержащий имя привязываемой карты. Значение атрибута должно начинаться со знака решётки. При этом в теге <img> должны быть явно указаны размеры изображения.
Карты изображения – это в принципе обыкновенные изображения , на которых определенная область является ссылкой , с помощью карт – изображения можно создавать навигационное меню .
Создадим три файла : главный файл test-kart.html , и два файла kart-chapter1.html и kart-chapter2.html которые будут загружаться при нажатии на карту-изображения .
Содержимое файла kart-chapter1.html
Содержимое файла kart-chapter2.html
Применение карт-изображений файл test-kart.html
Применение карт-изображений
Применение карт-изображений
При загрузке файла , мы увидим загруженный фрейм chapter1.html с главой 1 , при нажатии клавишей мышки на верхнею часть изображения загрузиться фрейм kart-chapter1.html с главой HTML :
Фрейм kart-chapter1.html с главой HTML
Фрейм с главой HTML
А при нажатии на нижнею часть изображения загрузиться фрейм kart-chapter2.html с главой CSS , при этом области на изображение будут выделены рамкой .
Фрейм kart-chapter2.html с главой HTML
Фрейм с главой CSS
Структура карт-изображений
С помощью тега <img> вставляет изображение в Web – страницу .
Атрибут usemap — указывает , что изображение является картой . В качестве значений атрибут указывает URL – адрес описания конфигурации.
Если описание расположено в том же HTML – документе , то указывается название раздела конфигурации карты , перед которым добавляется символ (#) .
Вторая часть , является описанием конфигурации карты , расположена между тегами <map> и </map> . Активная область карты описывается с помощью тега <area> . Сколько на карте активных областей , столько и тегов <area> должно быть .
Тег <map>
Парный тег <map> служит для описаний конфигурации областей карты — изображений . У тега <map> есть единственный атрибут — name . Значение атрибута name должно соответствовать имени в атрибуте usemap тега <img> .
Тег <area> описывает одну активную область на карте . Закрывающий тег не требуется . Если одна активная область перекрывает другую , то будет реализована первая ссылка из списка областей .
Атрибуты тега <area>
shape – Задает форму активной области . Он может принимать 4 Значения :
rect – Активная область в форме прямоугольника ( значения по умолчанию ):
shape – Задает форму активной области . Он может принимать 4 Значения :
circle — Активная область в форме круга :
poly — Активная область в форме многоугольника :
default — Активная область занимает всю площадь изображения . Данное значение не поддерживается Internet Explorer :
coords — Определяет координаты точек отдельной активной области . Координаты указывают относительно верхнего левого угла изображения и задаются следующим образом :
Для области типа rect задаются координаты верхнего левого и правого нижнего углов прямоугольника ( координаты указываются через запятую ) :
Здесь x1 , и y1 ,- координаты верхнего левого угла , а x2 и y2 — координаты правого нижнего угла , например :
Для области типа circle — указываются координаты центра круга и радиус :
Здесь x1 , и y1 , — координаты центра круга , а r1 – радиус круга , например :
Для области poly перечисляются координаты вершин многоугольника в нужном порядке :
Здесь x1 , y1 , x2 , y2 , x3 , y3 — координаты вершин многоугольника ( в данном случае треугольника ) . Можно задавать и большое количество вершин , иными словами , можно описать активную область практически любой формы . Координаты последней вершины не обязательно должны совпадать с первой :
href – указывает URL – адрес ссылки . Может указан абсолютный и относительный адрес ссылки :
nohref – указывает , что активная область не имеет ссылки . А используется для исключения другой части области :
alt — Задает текст всплывающей подсказки при наведении курсора мыши на активную область :
target – Указывает , куда будет загружен документ при переходе по ссылке . Может быть указано имя фрейма или одно из зарезервированных значений — _blank , _self или _parent :
Как узнать координаты картинки в html
Тег <area> (от англ. area — область) определяет активные области изображения, которые являются ссылками.
Рисунок с привязанными к нему активными областями называется в совокупности картой-изображением. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой. Элемент <area> задаёт форму области, её размеры, устанавливает адрес документа, на который следует сделать ссылку. <area> всегда располагается в контейнере <map> , который связывает координаты областей с изображением.
Несколько областей могут перекрывать друг друга, сверху будет та, которая в коде HTML располагается выше.
Изображения и мультимедиа
- area
Синтаксис¶
Закрывающий тег не требуется.
Атрибуты¶
href Задаёт адрес документа, на который следует перейти. hreflang Указывает язык документа, на который ведёт ссылка.
shape Форма области. target Имя фрейма, куда браузер будет загружать документ. type Устанавливает MIME-тип документа, на который ведёт ссылка.
Также для этого элемента доступны универсальные атрибуты.
Атрибут alt устанавливает альтернативный текст для области изображения. Такой текст не отображается в браузере, но поисковые системы его могут прочитать.
Синтаксис
Значения
Любая подходящяя текстовая строка.
Значение по умолчанию
coords¶
Атрибут coords устанавливает координаты области, она также называется «горячая область». Такая область может быть ссылкой на файл или связана с действием, определяемым скриптом.
Значения координат представляют собой набор чисел, разделённых запятыми. Если две области перекрываются между собой, приоритет имеет та, которая определена в коде HTML выше.
Синтаксис
Значения
Набор координат определяется формой «горячей области», которая задается атрибутом shape . Отсчёт координат обычно ведётся от левого верхнего угла изображения и указывается в пикселях.
Для прямоугольника ( shape=»rect» ) определяется четыре координаты — X1, Y1, X2, Y2, как показано на рис. 1.
Для окружности ( shape=»circle» ) определяется три координаты — координаты центра окружности (X, Y) и ее радиус (R), как показано на рис. 2.
Для полигона (многоугольника) ( shape=»poly» ) последовательно указываются координаты каждой вершины (X1, Y1, X2, Y2, :), как показано на рис. 3.
Значение по умолчанию
Атрибут href задаёт адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущую вкладку браузера, однако это поведение можно изменить с помощью атрибута target .
Синтаксис
Значения
В качестве значения принимается полный или относительный путь к файлу, а также указатель на функцию JavaScript.
Значение по умолчанию
hreflang¶
Атрибут hreflang указывает язык документа, на который ведёт ссылка активной области изображения.
Синтаксис
Значения
Значение по умолчанию
shape¶
Атрибут shape определяет форму «горячей области», координаты которой задаются с помощью атрибута coords .
Синтаксис
Значения
circle Область в виде окружности. default Указывает всю область. poly Область в виде полигона (многоугольника). rect Прямоугольная область.
Значение по умолчанию
- rect
target¶
Атрибут target определяет, как открывать ссылки — в новой вкладке, в текущей вкладке или в окне фрейма.
Синтаксис
Значения
В качестве значения используется имя фрейма, заданное атрибутом name элемента <iframe> . Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных имён используются следующие.
_blank Загружает страницу в новую вкладку браузера. _self Загружает страницу в текущую вкладку. _parent Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self . _top Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self .
Значение по умолчанию
- _self
Атрибут type устанавливает MIME-тип документа, на который ведёт ссылка. Этот атрибут носит рекомендательный характер и может использоваться для стилизации ссылок с заданным типом документа. Атрибут type должен добавляться только при наличии атрибута href .
Карта изображения в HTML: Знакомство.
В прошлом видео мы начали знакомство с изображениями. Узнали, как происходит вставка изображения в HTML, какие существуют параметры изображений и многое другое.
Сегодня продолжим разговор о параметрах. А именно поговорим об атрибуте ismap. Для чего он нужен? И как его использовать?
Атрибутам ismap и usemap посвящены отдельные видео уроки не просто так. Дело в том, что эти видео посвящены одному интересному методу использования изображений в HTML. Называется он карта изображения.
В HTML существует возможность кроме указания стандартной ссылки-картинки и возможность создания карты изображения. Это когда на одном изображении мы можем указать несколько активных областей, например ссылок.
В этом видео мы познакомимся с понятием карта изображения. Посмотрим, как она может выглядеть и как она работает. И поговорим подробнее об атрибуте ismap который поможет нам создать некую серверную карту изображения, которая в свою очередь поможет нам определить координаты активных областей.
Кроме этого мы поговорим и о других способах определения координат, и под видео Вы сможете найти пару ссылок, которые использованы в видео уроке.
Видео урок: Карта изображения в HTML.
Онлайн сервис для определения координат карты изображения: http://www.maschek.hu/imagemap/imgmap
Статья на Хабре, о еще одном практическом способе определения координат: http://habrahabr.ru/post/142419/
HTML-справочник и другие материалы можно и нужно скачать здесь!
Теперь мы знаем, что такое карта изображения в HTML и знаем, как определить координаты активных элементов на изображении, а значит, в следующем видео мы можем поговорить о непосредственном создании карты изображения.