In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > browser > properties > left (screen)

left property (screen)

Browser support:

Retrieves the horizontal offset of top-left corner of the current screen relative to the top-left corner of the main screen, in pixels.

Use the top property to get the top side and the width and height properties to retrieve the size of the screen.
If you need the dimensions of the area on the screen that is available for application windows, use the availWidth, availHeight, and the availLeft, availTop properties of the screen object.
To get the size and the top-left corner of the browser window, use the outerWidth, outerHeight and the screenX, screenY properties.

Syntax:

object.left;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

Integer that retrieves the offset, in pixels.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the left property:

<head>
    <script type="text/javascript">
        function GetDimensions () {
            var scrLeft = document.getElementById ("scrLeft");
            scrLeft.innerHTML = screen.left;
            var scrTop = document.getElementById ("scrTop");
            scrTop.innerHTML = screen.top;
            var scrWidth = document.getElementById ("scrWidth");
            scrWidth.innerHTML = screen.width;
            var scrHeight = document.getElementById ("scrHeight");
            scrHeight.innerHTML = screen.height;


            var availLeft = document.getElementById ("availLeft");
            availLeft.innerHTML = screen.availLeft;
            var availTop = document.getElementById ("availTop");
            availTop.innerHTML = screen.availTop;
            var availWidth = document.getElementById ("availWidth");
            availWidth.innerHTML = screen.availWidth;
            var availHeight = document.getElementById ("availHeight");
            availHeight.innerHTML = screen.availHeight;
        }
    </script>
</head>
<body onload="GetDimensions ();">
    <h3>Dimensions of the screen:</h3>
    Left: <span id="scrLeft"></span><br />
    Top: <span id="scrTop"></span><br />
    Width: <span id="scrWidth"></span><br />
    Height: <span id="scrHeight"></span><br />

    <h3>Dimensions of the available area:</h3>
    Left: <span id="availLeft"></span><br />
    Top: <span id="availTop"></span><br />
    Width: <span id="availWidth"></span><br />
    Height: <span id="availHeight"></span><br />
</body>