How to set the top position of an element with JavaScript?

In this tutorial, we shall learn to set the top position of an element with JavaScript. To set the top position of an element, we can use the DOM Style top property in JavaScript. Alternatively, we can use the DOM Style setProperty() method. Let us discuss our topic in brief.

Using the Style top Property

We can set or return the top position of an element using the JavaScript DOM style top property.

Following is the syntax to set the top position of an element using the Style top property with the dot notation or square brackets.

Syntax

object.style.top = "auto | length | % | initial | inherit";
object.style["top"] = "auto | length | % | initial | inherit";

With this syntax, we can set the required top position of an element to the element's style.

Parameters

  • auto − Allows the browser to set the top position.
  • length − Sets the top position in length units. Negative values are accepted.
  • % − Sets the top position in % of the parent element's height.
  • initial − Sets this property to its default value.
  • inherit − Inherits this property from its parent element.

The default value of the property is auto. The return value is a string representing the top position of an element.

Example 1

You can try to run the following code to set the top position of a div with JavaScript −

<!DOCTYPE html>
<html>
<head>
<style>
   #myID {
      position: absolute;
   }
</style>
</head>
<body>
   <button onclick="display()">Set Top Position</button>
   <div id="myID">
      This is demo text! This is demo text!
   </div>
   <script>
      function display() {
         document.getElementById("myID").style.top="100px";
      }
   </script>
</body>
</html>

Example 2

In this program, we are setting the top position of an element. The user selects the required top position value from the drop-down.

When the user ticks on the button, we call the function to set the element's top position following the syntax given above.

Here, the element's position is absolute. If the user selects inherit, the top value of the parent element is set to our element.

<!DOCTYPE html>
<head>
<style>
   #topPosUsrParent{
      top: 400px;
   }
   #topPosUsrEl{
      position: absolute;
      background-color: #AFEEEE;
   }
</style>
</head>
<body>
   <h3> Set the top position of an element using the<i> top
   </i>property.
   </h3>
   <div id="topPosUsrParent">
   <div id="topPosUsrEl"> Set the Top Position of this DIV <br>
   This is Demo Text</div>
   </div>
   <br>
   <br>
   <br>
   <div id="topPosUsrBtnWrap">
      <select id="topPosUsrSel">
         <option selected="selected"/> auto
         <option/> 300px
         <option/> -1px
         <option/> 50%
         <option/> initial
         <option/> inherit
      </select>
      <br>
      <p> Select a top position and click on the button. </p>
      <button onclick="setTop();"> Apply </button>
   </div>
   <br>
</body>
<script>
   function setTop(){
      var topPosUsrSelTag=document.getElementById("topPosUsrSel");
      var topPosUsrSelIndx=topPosUsrSelTag.selectedIndex;
      var topPosUsrSelStat=topPosUsrSelTag.options[topPosUsrSelIndx].text;
      var topPosUsrEl=document.getElementById("topPosUsrEl");
      topPosUsrEl.style.top=topPosUsrSelStat;
   }
</script>
</html>

Using the Style setProperty() Method

With this method, we can set the top position of an element by specifying the property name and value.

If the property exists in the element, this property will replace its value. Else it will create a new property and set a value.

Users can follow the syntax below for using this method.

Syntax

object.style.setProperty(propName, propValue, propPriority);

With this syntax, we can set the required property and value of an element to the element's style.

Parameters

  • propName − The property name. Here it is top. The value can be a caseinsensitive string.
  • propValue − The property value.
  • propPriority − The priority of the property. For example, getPropertyPriority("top") will return its priority. We can set null also. If a property is set as !important initially, and later if we need it, we can override using this priority parameter.

The setProperty() method does not return any value.

Example 3

In this program also, we are setting the top value of an absolute positioned element by getting the input from the user.

The difference in this program is that we override the top value with feature important using the setProperty method's priority option.

<html>
<head>
<style>
   #topPosSetAttrParent{
      top: 300px;
   }
   #topPosSetAttrEl{
      position: absolute;
      background-color: #BDB76B;
      top: auto !important;
      left: 20px;
   }
</style>
</head>
<body>
   <h3>Set the top position of an element using the<i> setProperty()
   </i>method.
   </h3>
   <div id="topPosSetAttrParent">
      <div id="topPosSetAttrEl"> This is Demo Text <br /> To set the
      top of this element select the position and click on the "Apply" button below.</div>
   </div>
   <br>
   <br>
   <div id="topPosSetAttrBtnWrap">
      <select id="topPosSetAttrSel">
         <option selected="selected"/>auto
         <option/> 200px
         <option/> -1px
         <option/> 5%
         <option/> initial
         <option/> inherit
      </select>
      <br>
      <p>Select a top position to set the current top value</p>
      <button onclick="setTopPosition();"> Apply </button>
   </div>
   <br>
</body>
<script>
   function setTopPosition(){
      var topPosSetAttrSelTag=document.getElementById("topPosSetAttrSel");
      var topPosSetAttrSelIndx=topPosSetAttrSelTag.selectedIndex;
      var topPosSetAttrSelStat=topPosSetAttrSelTag.options[topPosSetAttrSelIndx].text;
      var topPosSetAttrBtnWrap=document.getElementById("topPosSetAttrBtnWrap");
      var topPosSetAttrEl=document.getElementById("topPosSetAttrEl");
      topPosSetAttrEl.style.setProperty("top",topPosSetAttrSelStat, "important");
   }
</script>
</html>

This tutorial reviewed the methods to set the top property in JavaScript in this tutorial.

We can easily set the top property to an absolute element with either the dot operator or square brackets.

Another method, setProperty(), helps us to either set or reset the top value. Users can choose any method based on the requirements.

Updated on: 22-Nov-2022

10K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements