如何使用 JavaScript 設定元素的頂部位置？

在本教程中，我們將學習如何使用 JavaScript 設定元素的頂部位置。要設定元素的頂部位置，我們可以使用 JavaScript 中的 DOM Style top 屬性。或者，我們可以使用 DOM Style setProperty() 方法。讓我們簡要討論一下我們的主題。

使用 Style top 屬性

我們可以使用 JavaScript DOM style top 屬性設定或返回元素的頂部位置。

以下是使用 Style top 屬性（使用點表示法或方括號）設定元素頂部位置的語法。

語法

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

使用此語法，我們可以將元素所需的頂部位置設定為元素的樣式。

引數

  • auto − 允許瀏覽器設定頂部位置。
  • length − 以長度單位設定頂部位置。接受負值。
  • % − 以父元素高度的百分比設定頂部位置。
  • initial − 將此屬性設定為其預設值。
  • inherit − 從其父元素繼承此屬性。

該屬性的預設值為 auto。返回值是表示元素頂部位置的字串。

示例 1

您可以嘗試執行以下程式碼，以使用 JavaScript 設定 div 的頂部位置：

<!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>

示例 2

在此程式中，我們正在設定元素的頂部位置。使用者從下拉選單中選擇所需的頂部位置值。

當用戶點選按鈕時，我們呼叫函式根據上面給出的語法設定元素的頂部位置。

這裡，元素的位置是絕對的。如果使用者選擇 inherit，則父元素的頂部值將設定為我們的元素。

<!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>

使用 Style setProperty() 方法

使用此方法，我們可以透過指定屬性名稱和值來設定元素的頂部位置。

如果元素中存在該屬性，則此屬性將替換其值。否則，它將建立一個新屬性並設定一個值。

使用者可以按照以下語法使用此方法。

語法

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

使用此語法，我們可以將元素所需的屬性和值設定為元素的樣式。

引數

  • propName − 屬性名稱。這裡它是 top。值可以是不區分大小寫的字串。
  • propValue − 屬性值。
  • propPriority − 屬性的優先順序。例如，getPropertyPriority("top") 將返回其優先順序。我們也可以設定 null。如果最初將屬性設定為 !important，並且稍後我們需要它，我們可以使用此 priority 引數覆蓋它。

setProperty() 方法不返回值。

示例 3

在此程式中，我們也透過獲取使用者輸入來設定絕對定位元素的頂部值。

此程式的不同之處在於，我們使用 setProperty 方法的 priority 選項使用 feature important 覆蓋頂部值。

<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>

本教程回顧了在本教程中使用 JavaScript 設定 top 屬性的方法。

我們可以使用點運算子或方括號輕鬆地將 top 屬性設定為絕對元素。

另一種方法 setProperty() 幫助我們設定或重置 top 值。使用者可以根據需要選擇任何方法。

更新於: 2022-11-22

13K+ 閱讀量

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.