HTML - DOM Style Object bottom Property

Quiz

HTML DOM Style Object bottom property sets or returns the bottom position of a positioned element. It also specifies margin, padding, scrollbar and border.

Positioned element refers to an element with position property set to fixed, relative or absolute.

Syntax

Set the bottom property:

object.style.bottom= "auto | length | percentage | initial | inherit";

Get the bottom property:

object.style.bottom;

Property Values

Value	Description
auto	It is the default value in which browser sets the bottom position.
length	It sets the bottom position using pixels and other CSS measurement unit.
percentage	It sets the bottom position using percentage value.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents bottom position of a positioned element.

Example of HTML DOM Style Object 'bottom' Property

The following example sets the bottom position of p element using length and percentage. Here we have used absolute position.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object bottom Property
    </title>
    <style>
        #para {
            position: absolute;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Length</button>
    <button onclick="funTwo()">Percentage</button>
    <p id="para">Click to set the value to 50px</p>
    <script>
        function fun() {
            document.getElementById("para")
                .style.bottom = "50px";
        }
        function funTwo() {
            document.getElementById("para")
                .style.bottom = "28%";
        }
    </script>
</body>
</html>

Supported Browsers

Property
bottom	Yes 1	Yes 12	Yes 1	Yes 1	Yes 6

html_dom.htm

Print Page