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

javascriptobject oriented programmingfront end technology更新于 2024/6/10 11:24:17

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

什么是定位元素? JavaScript 中可用的位置值有相对、绝对、固定或静态。静态位置是默认位置值。静态元素按文档顺序排列。

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

我们必须在每个方向上设置位置，以便根据需要对齐元素。这里我们将看到正确的位置属性。

让我们更深入地了解这个主题，并了解如何正确设置位置。

使用正确的属性

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

位置 right 不适用于具有静态位置的元素。位置 right 是与原点的距离。在这种情况下，正方向是向左。

语法

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

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

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

参数

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

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

示例 1

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


<!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 元素的位置设置为正确。

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


<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 元素。我们从用户那里获取位置。

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


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