Javascript DOM CSS Style left Property

Introduction

Set the left position of a <button> element: 

document.getElementById("myBtn").style.left = "100px";

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myBtn {/* w ww  .j  av  a2 s .  c  o m*/
  position: absolute;
}
</style>
</head>
<body>

<button type="button" id="myBtn" onclick="myFunction()">
Set left position to 100 px</button>

<script>
function myFunction() {
  document.getElementById("myBtn").style.left = "100px";
}
</script>

</body>
</html>

The left property sets or gets the left position of a positioned element.

A positioned element is an element with the position property set to: relative, absolute, or fixed.

This property sets the left position of the element including padding, scrollbar, border and margin.

To set or get the right position of a positioned element, use the right property.

Property Values

Value Description
autoLets the browser set the left position. default
length Defines the left position in length units. Negative values are allowed
% Sets the left position in % of the width of the parent element
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The left property returns a String representing the left position of a positioned element.




PreviousNext

Related