如何使用 JavaScript 设置元素的内边距？

在本教程中，我们将学习使用JavaScript设置元素内边距的方法。

我们都知道 JavaScript 中有 margin（外边距）和padding（内边距）。那么，元素的内边距究竟是什么呢？

内边距 (Padding) 可以定义为元素内容与其边框之间的空间，而外边距 (Margin) 则在元素边缘周围添加空间。

使用 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+ 次浏览

开启您的职业生涯

完成课程获得认证

开始学习
广告