HTML - DOM Element offsetLeft Property

Quiz

The HTML DOM Element offsetLeft property is used to retrieve the horizontal distance in pixels from the left edge of an element to the left edge of its nearest positioned ancestor element.

The returned distance value includes the element margin, the parent container left padding, the scrollbar (if present), and the border.

Following is the list of similar offset properties:

offsetTop

offsetWidth

offsetHeight

Syntax

Following is the syntax of the HTML DOM Element offsetLeft property −

element.offsetLeft

Parameters

Since this is a property, it will not accept any parameter.

Return Value

This property returns the total distance in pixels from the left edge of an element to its nearest positioned ancestor left edge.

Example 1: Retrieving the offsetTop Property Value

The following program demonstrates the usage of the HTML DOM Element offsetLeft property. It displays the position from the left edge of the div element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element offsetLeft</title> 
<style>
   #ex {
       position: relative;
       left: 50px;
       padding: 10px;
       width: 200px;
       height: 100px;
       background-color: green;
       color: white;
   }
</style>
</head>
<body>
<h3>HTML DOM Element offsetHeight Property</h3>
<div id="ex">Example Element</div>
<br>
<button onclick="showvalt()">Show OffsetLeft</button>
<p id="od">Offset Left: <span id="olv"></span></p>
<script>
   const ex = document.getElementById('ex');
   const oldis = document.getElementById('olv');
   function showvalt() {
      const olv = ex.offsetLeft;
      oldis.textContent = `${olv}px`;
   }
</script>
</body>
</html>

The above program displays the left offset of the div element.

Example 2: Retrieving Horizontal Offset Using offsetLeft

Here is another example of the HTML DOM Element offsetLeft property. We use this property to get the horizontal position of an element, including the margin, padding, and parent container's border −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element offsetLeft</title> 
<style>
    #pc { 
        width: 300px;
        height: 200px; 
        border: 5px solid #ccc;
        padding: 20px;
    }
    #ex { 
        left: 50px;
        width: 200px;
        padding: 10px;
        height: 100px;
        background-color: lightblue;
    }
</style>
</head>
<body>
<h3>HTML DOM Element offsetLeft Property</h3>
<div id="pc">
<div id="ex">Example Element</div>
</div>
<br>
<button onclick="sol()">Show OffsetLeft</button>
<script>
   const ex = document.getElementById('ex');
   function sol() {
      const setval = ex.offsetLeft;
      alert(`Offset Left including margin, padding, 
      scrollbar, and parent container's border: ${setval} px`);
   }
</script>
</body>
</html>

Clicking the displayed button will alert the left offset of an element, including pixels, margin, and border.

Example 3: Using offsetLeft in an Event Handler

In the example below, we use this property with an event handler to change the element position and update the offsetLeft value accordingly −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element offsetLeft</title>
<style>
   #ex {
      position: relative;
      left: 50px;
      width: 200px;
      height: 100px;
      background-color: lightblue;
      transition: left 0.3s ease;  
      padding: 10px;
   }
   #ofdis {     
      border: 1px solid black;
      padding: 10px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element offsetLeft Property</h3>
<div id="ex">Example Element</div>
<div id="ofdis">Offset Left: <span id="oflt"></span>
pixels
</div> <br>
<button id="mB" onclick="ml()">Move Element</button>
<script>
   const ex = document.getElementById('ex');
   const od = document.getElementById('oflt');
   const mB = document.getElementById('mB');    
   function updatelt() {
   od.textContent = ex.offsetLeft;
   }  
   function ml() {
      ex.style.left = '150px';
      // Update offsetLeft value after movement
      updatelt(); 
      mB.textContent = 'Calculate offsetLeft'; 
      mB.setAttribute('onclick', 'cakculateleft()');  
   } 
   function cakculateleft() {
      // Update offsetLeft value
      updatelt();
   }
   //display of offsetLeft
   updatelt();
</script>
</body>
</html>

The program displayed a button when it clicked, an element moved to the left side. Clicking the button again calculates the left offset of the moved element.

Supported Browsers

Property
offsetLeft	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page