In this section, we will learn what the Element clientTop property is and how to use it in JavaScript.

What is Element clientTop Property in JavaScript?

The JavaScript Element clientTop property is used to get the width of the top border of an element.

Remember that this property only returns the width of the top border! This means the padding top and the margin top are not included.

Note: you could also use the style.borderTopWidth property to get the same value as well.

Element clientTop Property Syntax:

element.clientTop;

Element clientTop Property Input Value

The clientTop property is read-only and so we can’t use it to assign a value.

Element clientTop Property Return Value

The return value of this property, as mentioned before, is the size of the top border of an element.

Example: using Element clientTop Property in JavaScript

See the Pen using Element clientTop Property in JavaScript by Omid Dehghan (@odchan1) on CodePen.