如何使用 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+ 阅读量

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告