Skip to content
Related Articles

Related Articles

Improve Article
What is the difference between screenX/Y, clientX/Y and pageX/Y ?
  • Last Updated : 06 Nov, 2020

The difference between properties screenX/Y, clientX/Y, and pageX/Y of JavaScript are commonly confused. Each of the properties returns a value that indicates the number of physical pixels from different reference points. The differences and the use case of these properties are described below:

1. The screenX and screenY property: The screenX and screenY are read-only properties that provide horizontal and vertical coordinates respectively relative to the global, or screen coordinates. It returns a double floating-point value denoting the coordinate.

Example:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <h3>The screenX and screenY property</h3>
  
    <p>
        Click on the button to open a new
        window with the given parameters
        and check the screenX and screenY
        property.
    </p>
  
    <button onclick="getScreenXY()">
        Open Window
    </button>
  
    <script>
        function getScreenXY() {
  
            // Open a new window with the
            // left at 400 and the top at 200
            var newWindow = window.open("", "newWindow",
                "left=400, top=200, width=450, height=300");
  
            newWindow.document.write(
                "<p> This is the example window to" +
                " show the usage of screenX/Y");
  
            // Show the screenX and screenY property
            newWindow.document.write(
                "<br>screenX: " + newWindow.screenX
            );
            newWindow.document.write(
                "<br>screenY: " + newWindow.screenY + "</p>"
            );
        }
    </script>
</body>
  
</html>

Output:



2. The clientX and clientY property: The clientX and clientY are read-only properties that provide the horizontal and vertical coordinate respectively within the content area, or the viewport of the browser window.

For example, if the user scrolls down the webpage vertically and clicks at the start of the viewport, then clientY will always return 0. It returns a double floating-point value denoting the coordinate.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        div {
            width: 300px;
            height: 200px;
            border: 1px solid black;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <h3>The clientX and clientY property</h3>
  
    <p>
        Click anywhere in this rectangle to
        see the usage of the clientX and
        clientY properties
    </p>
  
  
    <div onclick="showCoordinates(event)"></div>
  
    <p id="display"></p>
  
    <script>
        function showCoordinates(event) {
            var x = event.clientX;
            var y = event.clientY;
            var coordinates = "clientX: " +
                x + ", clientY: " + y;
            document.getElementById("display")
                .innerHTML = coordinates;
        }
    </script>
</body>
  
</html>

Output:

3. The pageX and pageY property: The pageX and pageY are read-only properties that return the horizontal and vertical coordinates respectively relative to the left edge of the entire document, that is, relative to the left edge of the fully rendered content area in the browser window and just below the URL bar.

For example, if the user scrolls down the page, it would still return the coordinates relative to the top of the page regardless of the amount of scroll.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        div {
            width: 300px;
            height: 200px;
            border: 1px solid black;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <h3>The pageX and pageY property</h3>
  
    <p>
        Mouse over the rectangle see the
        usage of the pageX and pageY
        properties
    </p>
  
    <div onmousemove="showCoordinates(event)" 
        onmouseout="clearCoordinates()">
    </div>
      
    <p id="display"></p>
  
  
    <script>
        function showCoordinates(event) {
            var x = event.pageX;
            var y = event.pageY;
            var coordinates = "pageX: " +
                x + ", pageY: " + y;
            document.getElementById("display")
                .innerHTML = coordinates;
        }
  
        function clearCoordinates() {
            document.getElementById("display")
                .innerHTML = "";
        }
    </script>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :