如何使用 JavaScript 设置定位元素的正确位置？

在本教程中，我们将学习如何使用 JavaScript 设置定位元素的正确位置。

什么是定位元素？ JavaScript 中可用的 position 值有 relative、absolute、fixed 或 static。static 位置是默认的 position 值。静态元素按照文档顺序排列。

定位元素的位置基于其属性，例如顶部、右侧、底部和左侧。

我们必须在每个方向上设置位置，以根据需要对齐元素。在这里，我们将了解 right 位置属性。

让我们深入探讨主题，并了解如何设置 right 位置。

使用 right 属性

使用此属性，我们可以设置或返回定位元素的右侧位置。right 属性还包括边距、填充、边框和滚动条。

right 位置属性不适用于具有 static 位置的元素。right 位置是从原点开始的距离。在这种情况下，正方向朝左。

语法

用户可以按照以下语法使用此属性。

object.style.right = "auto|length|%|initial|inherit";

此语法允许我们将所需的 right 位置设置为元素的样式。

参数

  • auto - 浏览器设置 right 位置。
  • length - 以长度单位设置 right 位置。接受负值。
  • % - 以父元素宽度的百分比设置 right 位置。
  • initial - 将此属性设置为其默认值。
  • inherit - 从其父元素继承此属性。

此属性的默认值为 auto。返回值是一个字符串，表示定位元素的 right 位置。

示例 1

您可以尝试运行以下代码，以使用 JavaScript 设置定位元素的 right 位置 -

<!DOCTYPE html>
<html>
<head>
   <style>
   #box {
      width: 350px;
      height: 200px;
      background-color: orange;
      border: 3px solid red;
      position: absolute;
   }
   </style>
</head>
<body>
   <p>Click to set the right position.</p>
   <button type = "button" onclick = "display()"> Set Right Position</button>
   <div id="box">
      <p>This is a div. This is a div. This is a div. This is a
      div.</p>
      <p>This is a div. This is a div. This is a div. This is a
      div.</p>
      <p>This is a div. This is a div. This is a div. This is a
      div.</p>
   </div>
   <br>
   <br>
   <script>
      function display() {
         document.getElementById("box").style.right = "70px";
      }
   </script>
</body>
</html>

示例 2

在此程序中，我们为具有绝对位置的多个 div 元素设置了 right 位置。

当用户按下按钮时，我们调用函数以使用上面给出的语法设置 right 位置。

<html>
<head>
   <style>
      .rtPosMultEl{
         position: absolute;
         width: 20px;
         height: 20px;
      }
      #rtPosMultEl1{
         background-color: grey;
         top: 20px;
      }
      #rtPosMultEl2{
         background-color: black;
         top: 80px;
      }
      #rtPosMultEl3{
         background-color: pink;
         top: 50px;
      }
      #rtPosMultWrap{
         position: relative;
      }
      #rtPosMultBtnWrap{
         margin-top: 80px;
         float: left;
      }
   </style>
</head>
<body>
   <h2>Setting the right position of the positioned elements using the "right" property.</h2>
   <div id = "rtPosMultWrap">
      <div class = "rtPosMultEl" id = "rtPosMultEl1"> </div>
      <div class = "rtPosMultEl" id = "rtPosMultEl2"> </div>
      <div class = "rtPosMultEl" id = "rtPosMultEl3"> </div>
   </div>
   <br>
   <div id = "rtPosMultBtnWrap">
      <p> Click on the button to set different position right values.
      </p>
      <button onclick = "setRight();"> Move </button>
   </div>
   <br>
</body>
<script>
   function setRight(){
      var rtPosMultBtnWrap =
      document.getElementById("rtPosMultBtnWrap");
      var rtPosMultEl1 = document.getElementById("rtPosMultEl1");
      var rtPosMultEl2 = document.getElementById("rtPosMultEl2");
      var rtPosMultEl3 = document.getElementById("rtPosMultEl3");
      var rtPosMultEl4 = document.getElementById("rtPosMultEl4");
      rtPosMultEl1.style.right = "20px";
      rtPosMultEl2.style.right = "40px";
      rtPosMultEl3.style.right = "60px";
   }
</script>
</html>

示例 3

在此程序中，我们正在为单个绝对定位的 div 元素设置 right 位置。我们从用户那里获取 right 位置。

当用户按下按钮时，我们调用函数以使用上面给出的语法设置 right 位置。

<html>
<head>
   <style>
      #rtPosUsrEl{
         background-color: #B0E0E6;
         text-align: center;
         width: 200px;
         position: absolute;
      }
   </style>
</head>
<body>
   <div id = "rtPosUsrEl"> Move Me.</div>
   <br>
   <br>
   <div id = "rtPosUsrBtnWrap">
      <select id = "rtPosUsrSel">
         <option selected = "selected"/>auto
         <option/> 100px
         <option/> initial
         <option/> inherit
         <option/> 3%
         <option/> -5px
      </select>
      <br>
      <p>Choose the position right and click on the button.</p>
      <button onclick = "setRightUser();"> Set </button>
   </div>
   <br>
</body>
<script>
   function setRightUser(){
      var rtPosUsrSelTag = document.getElementById("rtPosUsrSel");
      var rtPosUsrSelIndx = rtPosUsrSelTag.selectedIndex;
      var rtPosUsrSelStat =
      rtPosUsrSelTag.options[rtPosUsrSelIndx].text;
      var rtPosUsrBtnWrap = document.getElementById("rtPosUsrBtnWrap");
      var rtPosUsrEl = document.getElementById("rtPosUsrEl");
      rtPosUsrEl.style.right = rtPosUsrSelStat;
      rtPosUsrEl.innerHTML = "<b>" + rtPosUsrEl.style.right + "</b>";
   }
</script>
</html>

在本教程中，我们介绍了 JavaScript 中的 right 属性，用于设置定位元素的 right 位置。

实现非常简单，因为它是在 JavaScript 中的内置属性。

更新于： 2022-10-25

2K+ 次浏览

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告