offsetX and offsetY property tutorial in JavaScript

October 14, 2024

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>offsetX offsetY JavaScript</title>
    <link rel="stylesheet" href="css/offsetX_offsetY_property_JavaScript.css">
</head>

<body>
    <h2>JavaScript offsetX & offsetY</h2>
    <div id="box"></div>
    <script>
        // var target = document.querySelector("#box");
        // target.addEventListener("mousemove", function (e) {
        //     console.clear();
        //     var x = e.offsetX;
        //     var y = e.offsetY;

        //     console.log("offsetX : " + x);
        //     console.log("offsetY : " + y);
        // });

        //Below Code is for mouse "click" Event
        var target = document.querySelector("#box");
        target.addEventListener("click", function (e) {
            console.clear();
            var x = e.offsetX;
            var y = e.offsetY;

            console.log("offsetX : " + x);
            console.log("offsetY : " + y);
        });
    </script>
</body>

</html>




Below File is css/offsetX_offsetY_property_JavaScript.css File
#box {
    width: 400px;
    height: 200px;
    border: 1px solid #000000;
    background: #ffc0cb;
    margin: 100px;
}