Javascript style position bottom

Style bottom Property

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

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

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

Tip: To set or return the top position of a positioned element, use the top property.

Browser Support

Syntax

Return the bottom property:

Property Values

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

Technical Details

Default Value:	auto
Return Value:	A String, representing the bottom position of a positioned element
CSS Version	CSS2

More Examples

Example

Set the bottom position of a element:

Example

Using negative values — Set the bottom position of a element:

Example

Return the bottom position of a element:

Источник

Style bottom Property

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

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

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

Tip: To set or return the top position of a positioned element, use the top property.

Browser Support

Syntax

Return the bottom property:

Property Values

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

Technical Details

Default Value:	auto
Return Value:	A String, representing the bottom position of a positioned element
CSS Version	CSS2

More Examples

Example

Set the bottom position of a element:

Example

Using negative values — Set the bottom position of a element:

Example

Return the bottom position of a element:

Источник

How to set the bottom position of a positioned element with JavaScript?

In this tutorial, we will learn how to set the bottom position of a positioned element with JavaScript.

The position property sets how the element should be positioned in the DOM, and the top, bottom, left, and right properties set the final location of the positioned elements. In JavaScript, we have different ways to set the bottom position of a positioned element, and in this tutorial, we will learn two of them −

Using the style.bottom Property

In JavaScript, the style.bottom property of an element is used to set the bottom position of a positioned element. Firstly, we get the element object using the document.getElementById() method and then set the style.bottom property.

Syntax

const object = document.getElementById('element_id') object.style.bottom = 'auto | length | % | inherit | initial'

In the above syntax, ‘element_id’ is the id of a positioned element. We are accessing the element using the document.getElementById() method and then we are setting the bottom position using style.bottom property.

Parameters

• auto − The browser will set the position.
• length − Sets the bottom position in length units.
• % − The top position in % of the parent element’s height.
• inherit − Inherits its parent element’s property.
• initial − Sets to default.

Example

In the below example, we have used the style.bottom property to set the bottom position of a positioned element with JavaScript. We have used a button click event function to set the bottom position of the element. The «setBottom» function is executed whenever we click on the «Set Bottom Position» button. The function accesses the element by the document.getElementById() method and then sets its style.bottom property value.

html> head> style> .container  width: 100%; height: 100%; > #root  position: absolute; border: 1px solid black; background-color: aqua; > /style> /head> body> h3> Set the bottom position of a positioned element using i> style.bottom /i> property in JavaScript /h3> button onclick="setBottom()">Set Bottom Position/button> div class="container"> div id="root">I am a positioned element/div> /div> script> function setBottom()  const root = document.getElementById('root') root.style.bottom = '40%' > /script> /body> /html> 
 

Using the Style setProperty() Method

In JavaScript, the style setProperty() method sets a new or existing property of an element. Firstly, we get the element object using the document.getElementById() method and then set the bottom position using the style.setProperty method.

Syntax

const object = document.getElementById('element_id') object.style.setProperty(property_name, value, priority)

In the above syntax, ‘element_id’ is the id of a positioned element. We are accessing the element using the document.getElementById() method and then used the style.setProperty. In the property name, it should be ‘bottom’, and the value and priority will be as per users.

Parameters

• property_name − The name of the property to be set.
• value − The new value of the property.
• priority − The priority of the property value (Optional).

Example

In the below example, we have used the style bottom property to set the bottom position of a positioned element with JavaScript. We have used an input field to take the user’s input to set the bottom position of the element. The «setBottom» function is executed whenever we click on the «Set Bottom Position» button. The function first gets the input field’s value from the document.getElementById() method and value property, and then set the bottom position using the style.setProperty method.

html> head> style> .container  width: 100%; height: 100%; > #root  position: absolute; border: 1px solid black; background-color: aqua; > /style> /head> body> p> Click the below button to set the bottom position of a positioned element using i> style.setProperty method /i> in JavaScript /p> button onclick="setBottom()">Set Bottom Position/button> div class="container"> div id="root">I am a positioned element/div> /div> script> function setBottom()  const root = document.getElementById('root') root.style.setProperty('bottom', 40) > /script> /body> /html> 
 

In this article, we learned how to set the bottom position of a positioned element with JavaScript. We have seen two ways to set the bottom position; firstly, using the style bottom property, and secondly, using the style setProperty method. In the first example, we see how to set the bottom position of a positioned element using a button click event. In the second example, we take the value of the bottom position from an input field, which takes the user’s desired value to set in the bottom position. Users now understand how to set the bottom position of a positioned element with JavaScript.

Источник

Javascript Reference — HTML DOM Style bottom Property

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

Browser Support

bottom	Yes	Yes	Yes	Yes	Yes

Syntax

Return the bottom property:

object.style.bottom=auto|length|%|initial|inherit

Property Values

Value	Description
auto	browser does the calculation. Default value
length	Sets bottom in px, cm, etc. Negative values are allowed
%	Sets bottom position in % of containing element. Negative values are allowed
inherit	Inherit the bottom property from the parent element

Technical Details

Default Value:	auto
Return Value:	A string representing the bottom position of a positioned element
CSS Version	CSS2

Example 1

The following code shows how to set the bottom position of a element.

 !DOCTYPE html> html> head> style> #myBtn !--from w w w . j a v a2s . co m--> position: absolute; >  body> button type="button" >"myBtn" onclick="myFunction()">test script> function myFunction() < document.getElementById("myBtn").style.bottom = "100px"; >   

The code above is rendered as follows:

Example 2

The following code shows how to set the bottom position of a element:

 !DOCTYPE html> html> head> style> #myDIV !--from ww w . j a va 2 s . co m--> position: absolute; width: 100px; height: 100px; background-color: coral; color: white; >  body> button onclick="myFunction()">test div >"myDIV">myDIV script> function myFunction() < document.getElementById("myDIV").style.bottom = "10px"; >   

The code above is rendered as follows:

Example 3

The following code shows how to use negative values to set the bottom position of a element.

 !DOCTYPE html> html> head> style> #myDiv !--from ww w. j a v a 2 s. c o m--> border: 1px solid #FF0000; position: relative; >  body> div >"myDiv">This is a div element. button type="button" onclick="myFunction()">test script> function myFunction() < document.getElementById("myDiv").style.bottom = "-100px"; >   

The code above is rendered as follows:

Example 4

The following code shows how to get the bottom position of a element.

 !DOCTYPE html> html> body> !--from ww w .ja va2 s. c o m--> div >"myDiv" style="position:absolute;bottom:0px;">This is a div element. button type="button" onclick="myFunction()">test script> function myFunction() < console.log(document.getElementById("myDiv").style.bottom); >   

The code above is rendered as follows:

java2s.com | © Demo Source and Support. All rights reserved.

Источник