如何使用 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日

984 次瀏覽

啟動您的職業生涯

完成課程獲得認證

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