如何使用 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+ 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.