Menu
Is it possible to translate pageX, pageY to clientX, clientY using DOM API?
I have an element of which I need to find clientX and clientY. I can easily get pageX and pageY using jQuery's offset method, but I am interested in getting clientX and clientY. There are no mouse events involved.
868
The clientX property returns the horizontal coordinate (according to the client area) of the mouse pointer when a mouse event was triggered. The client area is the current window. Tip: To get the vertical coordinate (according to the client area) of the mouse pointer, use the clientY property.
pageX/Y coordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling), while clientX/Y coordinates are relative to the top left corner of the visible part of the page, "seen" through browser window.
The getBoundingClientRect() method returns the size of an element and its position relative to the viewport. The getBoundingClientRect() method returns a DOMRect object with eight properties: left, top, right, bottom, x, y, width, height.
The Element. getBoundingClientRect() method returns a DOMRect object providing information about the size of an element and its position relative to the viewport.
var element = document.getElementById(...);
var clientRect = element.getBoundingClientRect();
var clientX = clientRect.left;
var clientY = clientRect.top;
The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
55
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
