如何使用 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+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告