HTML DOM Element offsetLeft

❮ Previous ❮ Element Object Reference Next ❯

Examples

Get the offsetLeft position of "myDIV":

const element = document.getElementById("myDIV");
let pos = element.offsetLeft;
Try it Yourself »

Get the positions of "myDIV":

const element = document.getElementById("myDIV");
let pos1= element.offsetTop;
let pos2= element.offsetLeft;
Try it Yourself »

Description

The offsetLeft property returns the left position (in pixels) relative to the parent.

The returned value includes:

  • the left position, and margin of the element
  • the left padding, scrollbar and border of the parent

The offsetLeft property is read-only.

Tutorial:

CSS Box Model

The offsetParent

All block-level elements report offsets relative to the offset parent:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

The offset parent is the nearest ancestor that has a position other than static.

If no offset parent exists, the offset is relative to the document body.

See Also:

The offsetTop Property.

The offsetWidth Property.

The offsetHeight Property.

The offsetParent Property.

The clientTop Property

The clientLeft Property

The clientWidth Property

The clientHeight Property

Syntax

Return the left offset position:

element.offsetLeft

Return Value

Type Description
NumberThe left position of the element, in pixels.

Browser Support

element.offsetLeft is supported in all browsers:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes Yes
❮ Previous ❮ Element Object Reference Next ❯
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.