La propiedad Style right en HTML DOM se usa para establecer o devolver la posición correcta de un elemento posicionado, incluido el relleno, la barra de desplazamiento, el borde y el margen.
Sintaxis:
- Se utiliza para devolver la propiedad correcta:
object.style.right
- Se utiliza para establecer la propiedad correcta:
object.style.right = "auto|length|%|initial|inherit"
Valores devueltos: Devuelve una string que representa la posición correcta de un elemento posicionado
Descripción del valor de la propiedad :
- auto: este valor establece automáticamente el valor correcto predeterminado por el navegador.
- longitud: este valor establece el valor correcto en las unidades de longitud especificadas. Esta longitud especificada puede ser tanto positiva como negativa.
- %: el valor porcentual establece el valor correcto en el porcentaje especificado del ancho del elemento principal.
- initial: este valor establece la propiedad correcta en el valor predeterminado de su navegador.
- heredar: este valor establece la propiedad correcta en el valor de su elemento principal.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style right Property
</title>
<style>
#GfG {
position: absolute;
background-color: green;
color: white;
}
</style>
</head>
<body>
<h1> Geeks for Geeks </h1>
<h2> HTML|DOM Style right Property </h2>
<button onclick="myFunction()">Click here</button>
<GfG id="GfG">
<h1>GfG</h1>
</GfG>
<script>
function myFunction() {
document.getElementById("GfG")
.style.right = "100px";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2:
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style right Property
</title>
<style>
#myGfG {
border: 1px solid #FF0000;
position: relative;
}
</style>
</head>
<body>
<h1> Geeks for Geeks </h1>
<h2> HTML|DOM Style right Property </h2>
<GfG id="myGfG">Welcome to Geeks for Geeks.</GfG>
<br>
<button type="button" onclick="myFunction()">
Click Here!
</button>
<script>
function myFunction() {
document.getElementById("myGfG")
.style.right = "-200px";
}
< GfG id = "myGfG" > Welcome to Geeks
for Geeks. < /GfG> < br >
< button type = "button"
onclick = "myFunction()" > Click Here! < /button>
< script >
function myFunction() {
document.getElementById("myGfG")
.style.right = "-200px";
}
</script>
</body>
</html>
</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.5 y superior
- Firefox 1 y superior
- Ópera 5 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