La propiedad Style top en HTML DOM se usa para establecer o devolver la posición superior de un elemento posicionado, incluido el relleno, la barra de desplazamiento, el borde y el margen.
Sintaxis:
- Se utiliza para devolver la propiedad superior:
object.style.top
- Se utiliza para establecer la propiedad superior:
object.style.top = "auto|length|%|initial|inherit"
Descripción del valor de la propiedad :
- auto: este valor establece automáticamente el valor superior predeterminado por el navegador.
- longitud: este valor establece el valor superior en las unidades de longitud especificadas. Esta longitud especificada puede ser tanto positiva como negativa.
- %: el valor porcentual establece el valor superior en el porcentaje especificado del ancho del elemento principal.
- initial: este valor establece la propiedad superior en el valor predeterminado de su navegador.
- heredar: este valor establece la propiedad superior en el valor de su elemento principal.
Valor de retorno: una string que representa la posición superior de un elemento posicionado.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style top Property
</title>
<style>
#myBtn {
position: absolute;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
HTML DOM Style top Property
</h2>
<button type="button" id="myBtn"
onclick="myFunction()">Click here!
</button>
<script>
function myFunction() {
document.getElementById("myBtn")
.style.top = "200px";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón (Tenga en cuenta que el botón Haga clic aquí se movió hacia abajo):
Ejemplo 2:
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style top Property
</title>
<style>
#GfG {
border: 1px solid #FF0000;
position: relative;
}
</style>
</head>
<body>
<h1> HTML|DOM Style top Property</h2>
<div id="GfG">Welcome to Geeks for Geeks.</div>
<br>
<button type="button" onclick="myFunction()">
Click Here!
</button>
<script>
function myFunction() {
document.getElementById("GfG")
.style.top = "-20px";
}
</script>
</body>
</html>
- Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
- Antes de hacer clic en el botón:
Navegadores compatibles:
- Google Chrome 1 y superior
- Borde 12 y superior
- Internet Explorer 5 y superior
- Firefox 1 y superior
- Ópera 6 y superior
- Safari 1 y superior
Publicación traducida automáticamente
Artículo escrito por divyatagoel0709 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA