HTML - DOM Style Object left Property

Quiz

HTML DOM Style Object left property sets or returns the left position of a positioned element. It specifies left position of the elements including padding, scrollbar, border, and margin.

Syntax

Set the left property

object.style.left= "auto | length | percentage | initial | inherit";

Get the left property

object.style.left;

Property Values

Value	Description
auto	It is the default value which lets browser set the left property value.
length	It specifies the left value in length units and can be both positive and negative.
percentage	It specifies the left value in percentage value of width of parent element.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents left position of positioned element.

Examples of HTML DOM Style Object 'left' Property

The following examples sets the left property of a p and div element.

Set Left Position of p Element

The following example sets the left property of a p element using length and percentage values.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object left Property
    </title>
    <style>
        #left {
            position: absolute;
        }
    </style>
</head>
<body>
    <p>
        Click to try different left property values.
    </p>
    <button onclick="fun()">Set Left in length</button>
    <button onclick="funTwo()">Set Left in %</button>    
    <br>
    <p id="left">
        Welcome to Tutorials Point.
    </p>
    <script>
        function fun() {
            document.getElementById("left")
                .style.left = "250px";
        }
        function funTwo() {
            document.getElementById("left")
                .style.left = "30%";
        }        
    </script>
</body>
</html>

Set Left Position of div Element

The following example sets the left property of a div element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object left Property
    </title>
    <style>
        #left {
            position: absolute;
        }
        #left div {
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body>
    <p>
        Click to try different left property values.
    </p>
    <button onclick="fun()">Set Left in length</button>
    <button onclick="funTwo()">Set Left in %</button>    
    <br><br>
    <div id="left">
        <div style="background-color: #04af2f;"></div>
    </div>
    <script>
        function fun() {
            document.getElementById("left")
                .style.left = "250px";
        }
        function funTwo() {
            document.getElementById("left")
                .style.left = "30%";
        }        
    </script>
</body>
</html>

Supported Browsers

Property
left	Yes 1	Yes 12	Yes 1	Yes 1	Yes 5

html_dom.htm

Print Page