clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

How to get X and Y position of an element using jQuery

writter  Hariom Prajapati
Date  20 Jun 2022
Language  JQuery
How to get X and Y position of an element using jQuery

How to get X and Y position of an element using jQuery

In this tutorial we will learn that how to get X and Y position of an element on click event using jQuery. Here will use jQuery get X Y coordinate of mouse click.

Using below code we can get X and Y position of an element on click event.

 

Get X and Y position of an element

<!DOCTYPE html>
<html>

<head>
    <title>X and Y Position of an Element on Click Event</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" crossorigin="anonymous"></script>
</head>

<body>
    <img id='demo_image' src='../x-and-y.png' />
</body>

<script type="text/javascript">
    $(document).ready(function () {
        $("#demo_image").click(function (e) {
            e.preventDefault();
            var offset = $(this).offset();
            var x = e.clientX - offset.left;
            var y = e.clientY - offset.top;
            console.log("X:" + x + " Y:" + y); //view output in console
        })
    });
</script>

</html>

 

Output

jqury

Related Posts
Categories
php
javascript
html
laravel
mysql
jquery
css
git
bootstrap
Latest Posts