Element clientTop Property - Javascript DOM

Javascript examples for DOM:Element clientTop

  1. HOME
  2. Javascript
  3. DOM
  4. Element clientTop

Description

The clientTop property returns the size of the top border of an element, in pixels.

This property is read-only.

Return Value

A Number, representing the size of an element's top border, in pixels

The following code shows how to get the width of a <div> element's top and left border:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {//  w  ww.j  ava 2s .c  o m
    height: 250px;
    width: 400px;
    padding: 10px;
    margin: 15px;
    border-top: 15px solid black;
    border-left: 10px solid red;
    background-color: lightblue;
}
</style>
</head>
<body>

<button onclick="myFunction()">Test</button>

<div id="myDIV">
  <p id="demo"></p>
</div>

<script>
function myFunction() {
    var elmnt = document.getElementById("myDIV");
    var txt = "Border top width: " + elmnt.clientTop + "px<br>";
    txt += "Border left width: " + elmnt.clientLeft + "px";
    document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

Related Tutorials