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

在本教程中，我們將學習如何使用 JavaScript 設定定位元素的底部位置。

position 屬性設定元素在 DOM 中的定位方式，而 top、bottom、left 和 right 屬性則設定定位元素的最終位置。在 JavaScript 中，我們有多種方法可以設定定位元素的底部位置，在本教程中，我們將學習其中的兩種：

  • 使用 style.bottom 屬性

  • 使用 style.setProperty 方法

使用 style.bottom 屬性

在 JavaScript 中，元素的 style.bottom 屬性用於設定定位元素的底部位置。首先，我們使用 document.getElementById() 方法獲取元素物件，然後設定 style.bottom 屬性。

語法

const object = document.getElementById('element_id')

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

在上述語法中，“element_id” 是定位元素的 ID。我們使用 document.getElementById() 方法訪問元素，然後使用 style.bottom 屬性設定底部位置。

引數

  • auto − 瀏覽器將設定位置。

  • length − 以長度單位設定底部位置。

  • % − 以父元素高度的百分比設定底部位置。

  • inherit − 繼承其父元素的屬性。

  • initial − 設定為預設值。

示例

在下面的示例中，我們使用了 style.bottom 屬性來使用 JavaScript 設定定位元素的底部位置。我們使用了按鈕點選事件函式來設定元素的底部位置。“setBottom” 函式在我們點選“設定底部位置”按鈕時執行。該函式透過 document.getElementById() 方法訪問元素，然後設定其 style.bottom 屬性值。

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

使用 Style setProperty() 方法

在 JavaScript 中，style setProperty() 方法設定元素的新屬性或現有屬性。首先，我們使用 document.getElementById() 方法獲取元素物件，然後使用 style.setProperty 方法設定底部位置。

語法

const object = document.getElementById('element_id')

object.style.setProperty(property_name, value, priority)

在上述語法中，“element_id” 是定位元素的 ID。我們使用 document.getElementById() 方法訪問元素，然後使用 style.setProperty。在屬性名稱中，它應該是“bottom”，值和優先順序將根據使用者而定。

引數

  • property_name − 要設定的屬性的名稱。

  • value − 屬性的新值。

  • priority − 屬性值的優先順序（可選）。

示例

在下面的示例中，我們使用了 style.bottom 屬性來使用 JavaScript 設定定位元素的底部位置。我們使用了輸入欄位來獲取使用者輸入以設定元素的底部位置。“setBottom” 函式在我們點選“設定底部位置”按鈕時執行。該函式首先從 document.getElementById() 方法和 value 屬性獲取輸入欄位的值，然後使用 style.setProperty 方法設定底部位置。

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

在本文中，我們學習瞭如何使用 JavaScript 設定定位元素的底部位置。我們看到了兩種設定底部位置的方法：首先，使用 style bottom 屬性；其次，使用 style setProperty 方法。在第一個示例中，我們看到了如何使用按鈕點選事件設定定位元素的底部位置。在第二個示例中，我們從輸入欄位獲取底部位置的值，該欄位獲取使用者希望設定在底部位置的值。使用者現在瞭解瞭如何使用 JavaScript 設定定位元素的底部位置。

更新於：2022年11月9日

2K+ 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告