Javascript DOM HTML Element clientLeft Property

Introduction

The clientLeft property returns the width of the left border of an element, in pixels.

Get the width of a <div> element's top and left border:

Click the button to get the width of the div's top and left border, in pixels.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {/* w  ww  .ja v a 2  s. co 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>

This property does not include the element's left padding or the left margin.

You can also use the style.borderLeftWidth property to return the width of an element's left border.

To return the width of the top border of an element, use the clientTop property.

This property is read-only.

The clientLeft property returns a Number representing the width of an element's left border, in pixels.




PreviousNext

Related