screenX and screenY 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>screenX screenY property JavaScript</title>
    <link rel="stylesheet" href="css/screenX_screenY_property_JavaScript.css">
</head>

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

        //     console.log("screenX : " + x);
        //     console.log("screenY : " + y);
        // });

        //For box, when we click on box then only x and y value updated in console
        // document.querySelector("#box").addEventListener("mousemove", function (e) {
        //     console.clear();
        //     var x = e.screenX;
        //     var y = e.screenY;

        //     console.log("screenX : " + x);
        //     console.log("screenY : " + y);
        // });

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

            var x2 = e.clientX;
            var y2 = e.clientY;

            console.log("screenX : " + x);
            console.log("clientX : " + x2);

            console.log("screenY : " + y);
            console.log("clientY : " + y2);
        });
    </script>
</body>

</html>




Below File is css/screenX_screenY_property_JavaScript.css File
#box {
    width: 400px;
    height: 300px;
    border: 1px solid #000000;
    background: #ffc0cb;
}