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

启动您的职业生涯

完成课程获得认证

开始学习
广告