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

启动你的职业生涯

完成课程获得认证

开始学习
广告