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

在本教程中，我们将学习如何使用 JavaScript 设置元素的左外边距。

外边距是元素边界外部周围的空间。元素的外边距可以位于所有侧边，例如：左、右、上和下。在 JavaScript 中使用 marginLeft 属性来设置左外边距。

在本教程中，我们将讨论两种设置左外边距的方法 -

  • 使用 marginLeft 属性

  • 使用 setProperty 方法

使用 marginLeft 属性设置元素的左外边距

JavaScript 中元素的 marginLeft 属性可用于每个元素对象。此属性设置元素的左外边距。document.getElementById() 方法用于获取元素对象。之后，我们使用 marginLeft 属性设置元素的左外边距。

语法

const element = document.getElementById('element')
element.style.marginLeft = length | % | auto | initial

在上述语法中，使用了 marginLeft 属性，该属性在元素对象的 style 属性上可用。

参数

  • length - 元素的左外边距以长度单位表示。

  • % - 元素的左外边距以百分比表示。

  • auto - 元素的左外边距由浏览器设置。

  • initial - 元素的左外边距设置为默认值。

示例

在下面的示例中，我们使用 JavaScript 和 marginLeft 属性设置元素的左外边距。“设置左外边距”按钮分配了一个点击事件，该事件调用“setLeftMargin()”函数。它设置多个元素的左外边距。

<html>
<head>
   <style>
      div {
         padding: 15px;
         margin-top: 5px;
         background-color: rgb(253, 211, 223);
      }
   </style>
</head>
<body>
   <h2> Using the <i> marginLeft property </i> with JavaScript to set the left margin of an element </h2>
   <button onclick="setLeftMargin()"> Set Left Margin </button>
   <div id="element1"> The element 1 </div>
   <div id="element2"> The element 2 </div>
   <div id="element3"> The element 3 </div>
   <div id="element4"> The element 4 </div>
   <script>
      
      // all elements
      const e1 = document.getElementById('element1')
      const e2 = document.getElementById('element2')
      const e3 = document.getElementById('element3')
      const e4 = document.getElementById('element4')
      
      // 'Set Left Margin' button click event handler function
      function setLeftMargin() {
         e1.style.marginLeft = '50px'
         e1.innerHTML = 'The element 1 (marginLeft: 50px)'
         e2.style.marginLeft = '20%'
         e2.innerHTML = 'The element 2 (marginLeft: 20%)'
         e3.style.marginLeft = 'auto'
         e3.innerHTML = 'The element 3 (marginLeft: auto)'
         e4.style.marginLeft = '100px'
         e4.innerHTML = 'The element 4 (marginLeft: 100px)'
      }
   </script>
</body>
</html>

使用 setProperty 方法设置元素的左外边距

JavaScript 中的 setProperty 方法是设置元素任何新属性或现有属性的另一种方法。它在参数中获取属性名称和值，并使用提供的值设置该属性。例如，要设置元素的左外边距，setProperty 方法将“margin-left”作为第一个参数，并在第二个参数中获取值。此方法在元素元素对象的 style 对象中可用。

语法

document.getElementById('element').style.setProperty(name, value, priority)

在上述语法中，document.getElementById() 方法提供元素对象，以便我们可以使用 setProperty 方法。

参数

  • name - 属性的名称。

  • value - 属性值。

  • priority - 属性值的优先级（可选）。

示例

<html>
<head>
   <style>
      div {
         padding: 15px;
         margin-top: 5px;
         background-color: rgb(253, 211, 223);
      }
   </style>
</head>
<body>
   <h2> Using the <i> setProperty method </i> with JavaScript to set the left margin of an element </h2>
   <h4> Enter the left margin value (in % or px) for the element: </h4>
   <input type="text" id="margin-left-input" name="margin-left-input" value="30%">
   <button onclick="setLeftMargin()"> Set Left Margin </button>
   <div id="root"> The root element </div>
   <script>
      
      // 'Set Left Margin' button click event handler function
      function setLeftMargin() {
         const root = document.getElementById('root');
         
         // user input value for left margin
         const margin_left_value = document.getElementById('margin-left-input').value;
         root.style.setProperty('margin-left', margin_left_value);
         root.innerHTML = 'The root element (marginLeft:' + margin_left_value + ')';
      }
   </script>
</body>
</html>

在本教程中，我们学习了如何使用 JavaScript 设置元素的左外边距。我们已经看到了两种方法，使用 marginLeft 属性和 setProperty 方法。用户可以遵循任何一种方法来设置元素的左外边距。

更新于: 2022年11月15日

4K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告