Javascript DOM CSS Style bottom Property

Introduction

Set the bottom position of a <button> element: 

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

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myBtn {//w w  w .java  2  s .co  m
  position: absolute;
}
</style>
</head>
<body>

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

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

</body>
</html>

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

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

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

Property Values

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

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




PreviousNext

Related