如何使用 JavaScript 設定元素的內邊距？

在本教程中，我們將學習使用JavaScript設定元素內邊距的方法。

我們都知道 JavaScript 中有邊距和內邊距。那麼，元素的內邊距究竟是什麼呢？

內邊距可以定義為元素內容與其邊框之間的空間，而邊距則是在邊緣周圍新增的空間。

在 JavaScript 中使用 padding 屬性來設定元素的內邊距。

讓我們看看設定內邊距的方法。

使用 Style padding 屬性

在本節中，我們將討論 padding 屬性。我們可以用畫素 (px)、磅 (pt)、百分比 (%)、釐米 (cm) 等來指定內邊距。padding 屬性的工作原理如下。

padding: 10px; 為元素的頂部、右側、底部和左側設定 10px 內邊距。

padding: 10px 20px; 為元素的頂部和底部設定 10px 內邊距。為元素的右側和左側設定 20px 內邊距。

padding: 10px 20px 30px; 為元素的頂部設定 10px 內邊距。為元素的右側和左側設定 20px 內邊距。為元素的底部設定 30px 內邊距。

padding: 10px 20px 30px 40px; 為元素的頂部設定 10px，右側設定 20px，底部設定 30px，左側設定 40px 內邊距。

語法

以下是使用 JavaScript 中的 padding 屬性設定元素內邊距的語法：

object.style.padding = "%|length|initial|inherit|revert|revert-layer|unset"

上述語法將 padding 值設定為元素的 style 屬性。預設情況下，padding 值為 0。返回值是一個表示 padding 值的字串。

引數

  • % - 父元素寬度的百分比內邊距。
  • length - 內邊距值。它必須是一個正值。不適用於 table-rowgroup、table-header-group、table-footer-group、table-row、table-column-group 和 table-column。適用於 ::first-letter 和 ::first-line。
  • initial - 預設值。
  • inherit - 從父元素繼承屬性值。

示例 1

此程式有一個 div 標籤，我們將為其設定內邊距。當用戶按下按鈕時，我們將呼叫該函式使用上述語法設定內邊距。

<html>
<head>
<style>
   #padEl{
      border: 5px solid #000000;
      background-color: #9400D3;
      color: #FFFFFF;
   }
</style>
</head>
<body>
   <p> Setting the padding of an element using <i>the padding
   </i>property</p>
   <div id = "padBtnWrap">
      <p> Click the "Set it" button </p>
      <button onclick="setPadding()"> Set it </button>
   </div>
   <br><br>
   <div id = "padEl">Hello, set padding for me.</div>
   <script>
      function setPadding(){ 
         var padEle=document.getElementById("padEl");
         var padBtEle=document.getElementById("padBtnWrap");
         padEle.style.padding="10px 20px 30px 40px";
         padEle.innerHTML="Padding set as 10px 20px 30px 40px.";
         padBtEle.style.display="none";
      }
   </script>
</body>
</html>

示例 2

在此程式中，我們有一個 div 元素，其內邊距值已設定。當用戶單擊按鈕時，我們將呼叫該函式使用上述語法顯示內邊距。

<html>
<head>
<style> 
   #padEl{
      border: 10px solid #696969;
      background-color: #556B2F;
      color: #FFFFFF;
      font-weight: bold;
   }
</style>
</head>
<body>
   <h4> Get the padding of an element using the<i> padding</i>property</h4>
   <div id="padBtnWrap"
      <p> Click the "Get it" button </p>
      <button onclick="getPadding()">Get it</button>
   </div>
   <br><br>
   <div id="padEl" style="padding: 40px 30px 20px 10px;"> Hello, get
   padding for me. </div>
   <br><br>
   <div id="padOp"></div>
   <script>
      function getPadding(){
         var padVal=document.getElementById("padEl").style.padding;
         document.getElementById("padOp").innerHTML="The padding is=" + padVal;
         document.getElementById("padBtnWrap").style.display="none";
      }
   </script>
</body>
</html>

示例 3

在此示例中，我們從使用者那裡獲取內邊距值和內邊距選項。當用戶提供所需的輸入並單擊按鈕時，我們將呼叫該函式將使用者指定的內邊距值設定為元素。

<html>
<head>
<style>
   #padUsrEl{
      border: 10px solid #8A2BE2;
      background-color: #5F9EA0;
   }
   #padUsrErr{
      color: red;
      font-weight:bold;
      display: none;
   }
</style>
</head>
<body>
   <h4>
      Set user-specified padding of an element using the <i>padding</i> property
   </h4>
   <div id = "padUsrBtnWrap"
      <p> Enter a padding value and click on the button </p>
      <input name="padUsrTxt" type="text" id="padUsrTxt" placeholder="Enter like 1px 1em 1% 1cm"/>
      <br><br>
      <button onclick="setUserPadding()"> Set it </button>
   </div>
   <br>
   <div id="padUsrErr"> Please provide input and click on the button </div>
   <br><br>
   <div id="padUsrEl"> I am a div element. </div>
   <br><br>
   <script>
      function setUserPadding() {
         var padVal;
         var padTxtVal=document.getElementById('padUsrTxt').value;
         if(padTxtVal=="")
            document.getElementById("padUsrErr").style.display="block";
         else{
            padVal=padTxtVal;
            document.getElementById("padUsrEl").style.padding=padVal;
            document.getElementById("padUsrEl").innerHTML="Padding set to " + padVal;
            document.getElementById("padUsrErr").style.display="none";
         }
      }
   </script>
</body>
</html>

在本教程中，我們討論了在 JavaScript 中使用 padding 屬性設定元素內邊距。

padding 屬性是 JavaScript 中的內建屬性，對編碼人員來說非常易於使用。

更新於：2022年11月22日

5000+ 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告