如何使用JavaScript設定元素的正確填充？

在本教程中，我們將學習如何使用JavaScript設定元素的正確填充。

首先，讓我們嘗試理解填充的含義；填充只是頁面邊框和內容之間的額外空間。填充值越大，兩者之間的間隙就越大。填充類似於邊距；但填充與邊距不同，因為填充在邊框和內容之間新增空間，而邊距用於在邊緣周圍新增空間。

雖然可以在所有方向（即頂部、底部、左側和右側）設定填充，但在接下來的幾行中，我們將看到如何向元素的右側新增填充。這可以使用object.style.paddingRight來實現。

使用Style paddingRight屬性

style paddingRight屬性決定元素右側填充區域的寬度。

語法

object.style.paddingRight = value ;

使用者可以按照上述語法設定右側填充。

引數

  • 值 – 以單位（em、ex、%、px、cm、mm、in、pt、pc）表示的數值

示例

在下面的示例中，我們建立了一個具有特定高度和寬度的盒子；我們添加了背景顏色，以便我們可以清楚地看到新增填充後的變化。所有樣式都儲存在ID“Rpad”下。單擊“啟用右側填充”按鈕後，我們可以看到程式碼中提到的70px的右側填充。觀察輸出中內容和邊框之間是如何新增空間的。

<html>
<head>
<style>
   #Rpad {
      border: 1px solid black;
      background-color: #BBFA9F;
      width: 400px;
      height: 70px;
   }
</style>
</head>
<body>
   <div id = "rPad">
      This is a sample text with rPad as it's Id
   </div>
   <br><br>
   <script>
      function myFunction() {
         document.getElementById("rPad").style.paddingRight = "70px";
      }
   </script>
   <button onclick="myFunction()"> Enable Right padding </button>
</body>
</html>

另一種方法是使用object.style.padding。

使用Style padding屬性

Style padding屬性類似於style paddingRight屬性，但這裡有更多引數需要考慮。

語法

Object.style.padding="Top, Right, Bottom, Left";

使用者可以使用另一種方法按照上述語法設定右側填充。

引數

  • 頂部 – 從頂部開始的填充值。
  • 右側 – 右側的填充。
  • 底部 – 從底部開始的填充。
  • 左側 – 左側的填充。

示例

在下面的示例中，我們必須提及所有引數。在這種情況下，我只向右側添加了填充。單擊按鈕後，我們可以看到內容和邊距之間的間隙增大了。

<html>
<head>
<style>
   #Pad {
      border: 1px solid black;
      background-color: #BBFA9F;
      width: 400px;
      height: 70px;
   }
</style>
</head>
<body>
   <div id="Pad">
      This is a sample text with Pad as its Id
   </div>
   <br>
   <script>
      function myFunction() {
         document.getElementById("Pad").style.padding = "0px 100px 0px 0px";
      }
   </script>
<button onclick="myFunction()"> Enable Right padding </button>
</body>
</html>

這是我們使用JavaScript設定元素右側填充的兩種方法。

更新於：2022年11月22日

982 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.