如何使用 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 − 元素的左边距设置为默认值。
示例
在下面的示例中，我们使用 marginLeft 属性通过 JavaScript 设置元素的左边距。"设置左边距"按钮分配有一个单击事件，该事件调用"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"作为第一个参数，在第二个参数中采用该值。此方法在元素的元素对象中存在的样式对象中可用。
语法
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 方法的两种方法。用户可以按照其中任何一种方法来设置元素的左边距。
