La propiedad Style left se utiliza para establecer o devolver la posición izquierda de un elemento posicionado.
La propiedad Style left se utiliza para especificar la posición izquierda de los elementos, incluido el relleno , la barra de desplazamiento , el borde y el margen .
Sintaxis:
object.style.left
object.style.left = "auto|length|%|initial|inherit"
Valores devueltos: Devuelve un valor de string, que representa la posición izquierda de un elemento posicionado.
Valores de propiedad:
- auto: este valor establece automáticamente el valor izquierdo predeterminado por el navegador.
- longitud: este valor establece el valor de la izquierda en las unidades de longitud especificadas. Esta longitud especificada puede ser tanto positiva como negativa.
- %: el valor porcentual establece el valor de la izquierda en el porcentaje especificado del ancho del elemento principal.
- initial: este valor establece la propiedad izquierda en el valor predeterminado de su navegador.
- heredar: este valor establece la propiedad de la izquierda en el valor de su elemento principal.
Ejemplo: establecer la posición izquierda de un elemento <button>.
<!DOCTYPE html>
<html>
<head>
<title>Style left Property Method in HTML</title>
<style>
#MyButton {
position: absolute;
}
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</style>
</head>
<body onclick="MyEvent(event)">
<h1>GeeksforGeeks</h1>
<h2>Style left Property Method</h2>
<p>For moving the button to its left,
double click the "Move Left" button: </p>
<button type="button" id="MyButton" ondblclick="left()">
Move Left
</button>
<script>
function left() {
/* The left property is defined with length value.
Similarly other values also can be defined
for this property. */
document.getElementById("MyButton")
.style.left = "100px";
}
</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 | Las propiedades izquierdas del estilo DOM se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- safari de manzana
- Ópera
Publicación traducida automáticamente
Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA