如何使用 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+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告