El método offset() es un método incorporado en jQuery que se utiliza para establecer o devolver las coordenadas de desplazamiento del elemento seleccionado.
Sintaxis:
$(selector).offset()
- Parámetros: No se requiere parámetro.
$(selector).offset({top:value, left:value})
- Parámetros: El parámetro es necesario cuando se establece el desplazamiento.
$(selector).offset( function(index, offset) )
- Parámetros: este método establece el desplazamiento usando la función. El parámetro utilizado en este método es opcional. El parámetro de índice se utiliza para devolver la posición del elemento establecido y el desplazamiento devuelve la coordenada del elemento seleccionado.
Valor devuelto: este método devuelve la coordenada de los elementos coincidentes.
Los ejemplos a continuación ilustran el método offset() en jQuery:
Ejemplo 1: En el código a continuación, esto devolverá la coordenada del primer elemento coincidente.
html
<!DOCTYPE html>
<html>
<head>
<title>The offset Method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
$(document).ready(function() {
$("button").click(function() {
var Geek = $("p").offset();
alert("Top coordinate: " + Geek.top +
" Left Coordinate: " + Geek.left);
});
});
</script>
<style>
div {
width: 60%;
min-height: 150px;
padding: 20px;
font-size: 25px;
border: 2px solid green;
font-weight: bold;
color:green;
}
</style>
</head>
<body>
<!-- Click on paragraph -->
<div>
<p>Welcome to GeeksforGeeks!</p>
<button>click Here!</button>
</div>
</body>
</html>
Producción:
Ejemplo 2:
html
<!DOCTYPE html>
<html>
<head>
<title>The offset Method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").offset({top: 100, left: 140});
});
});
</script>
<style>
div{
width: 300px;
min-height: 100px;
color:green;
font-weight: bold;
padding:20px;
font-size: 25px;
border: 2px solid green;
}
</style>
</head>
<body>
<div>
<!-- Click on paragraph -->
<p>Welcome to GeeksforGeeks!</p>
<button>Click Here!</button>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA