Event coordinates and element dimentions on a page

Often times you will find yourself in a situation where you need to get the width and height of an element or the coordinates of a mouse click or mouse move. Therefore, I created a very simple illustration to help you easily determine what property you need to get for your needs.

Event coordinates

Diagram showing the properties relative to the mouse event.

event coordinates

Element coordinates

Diagram showing the properties of a element with respect to its parent. The one with the green outline is the parent and the one with the red outline is the child. In this case, the child is larger than the parent and overflows out of it in both x and y directions.
There are several more but most of the time, the ones you see here will be sufficient.

element dimentions

Ryan Sukale

Ryan Sukale

Ryan is just a regular guy next door trying to manage his life and finances.

Leave a Reply

Your email address will not be published.