La propiedad DOM Style marginLeft se usa para establecer u obtener el margen izquierdo de un elemento. El margen se usa para insertar espacio alrededor del borde, a diferencia del relleno que se usa para insertar espacio dentro del borde de un elemento.
Sintaxis:
- Para establecer el margen izquierdo:
object.style.marginLeft='%|length|auto|initial|inherit'
- Para devolver el margen izquierdo:
object.style.marginLeft
Valores:
| valor | descripción |
|---|---|
| % | Se utiliza para definir el margen izquierdo en porcentaje del ancho de su padre |
| longitud | Se utiliza para definir el margen izquierdo en términos de unidad de longitud. |
| auto | Se utiliza cuando se desea que el margen izquierdo lo establezca el navegador |
| inicial | Se utiliza para establecer el valor de la propiedad en su valor predeterminado. |
| heredar | Hereda el valor de esta propiedad, es decir, establece el mismo valor que el padre |
Valor predeterminado: el valor predeterminado de esta propiedad es 0.
Valor de retorno: una string que representa el margen izquierdo.
Ejemplo-1: Devolver el margen izquierdo.
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style marginLeft Property
</title>
<style>
#d {
border: 2px solid black;
}
</style>
</head>
<body>
<div id="d" style="margin-left:3cm;">
GEEKS FOR GEEKS A Computer Science Portal For Geeks.
</div>
<br>
<button type="button" onclick="myFunction()">
Return left margin
</button>
<script>
function myFunction() {
// Returning left margin.
alert(document.getElementById("d").style.marginLeft);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-2: establezca el margen izquierdo usando la unidad de longitud.
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style marginLeft Property
</title>
<style>
#d {
border: 2px solid black;
}
</style>
</head>
<body>
<div id="d">
GEEKS FOR GEEKS A Computer Science Portal For Geeks.
</div>
<br>
<button type="button" onclick="myFunction()">
Set leftmargin
</button>
<script>
function myFunction() {
// Set left margin.
document.getElementById("d").style.marginLeft = "10px";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-3: establecer el margen izquierdo usando porcentaje.
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style marginLeft Property
</title>
<style>
#d {
border: 2px solid black;
}
</style>
</head>
<body>
<div id="d">
GEEKS FOR GEEKS A Computer Science Portal For Geeks.
</div>
<br>
<button type="button" onclick="myFunction()">
Set leftmargin
</button>
<script>
function myFunction() {
// Set left margin.
document.getElementById("d").style.marginLeft = "10%";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Navegadores compatibles: El navegador compatible con HTML | La propiedad marginLeft del estilo DOM se enumeran a continuación:
- Google Chrome
- Borde
- Mozilla Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por EnaMotwani y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA