Ambos métodos jQueryUI devuelven el objeto que contiene propiedades de coordenadas enteras de las posiciones superior e izquierda. Las posiciones de las coordenadas superior e izquierda se devuelven en píxeles. Ambas funciones se aplican solo en elementos visibles, no en elementos ocultos.
Ejemplo: El ejemplo proporciona las coordenadas superior e izquierda del cuadro que contiene el texto.
<!DOCTYPE html>
<html>
<head>
<title>The difference between
offset and position Method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the method -->
<script>
/* code for position */
$(document).ready(function() {
$("#position").click(function() {
var Geek = $("#testDiv").position();
alert("Top : " + Geek.top +
" Left : " + Geek.left);
});
/* code for offset */
$("#offset").click(function() {
var Geek = $("#testDiv").offset();
alert("Top : " + Geek.top +
" Left : " + Geek.left);
});
});
</script>
<style>
#container {
width: 40%;
min-height: 100px;
padding: 20px;
font-size: 25px;
border: 2px solid green;
font-weight: bold;
color: green;
background: gray;
position: relative;
}
#testDiv {
background: silver;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<b>offset() and position()</b>
<div>
<div id="container">
<div id="testDiv">
Welcome to GeeksforGeeks
</div>
</div>
<div style="height:10px"></div>
<button id="offset">click for offset</button>
<button id ="position">
click for position
</button>
</div>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en cualquier botón:
- Después de hacer clic en el botón:
compensar:
posición:
Diferencia entre el método offset() y position():
| Método de compensación() | método de posición() |
|---|---|
| El método offset() en jQuery devuelve la primera posición encontrada del elemento HTML con respecto al documento. | El método position() en jQuery devuelve la posición actual del elemento HTML con respecto a su padre desplazado. |
| El jQuery UI offset() es relativo al documento. | La posición de jQuery UI() es relativa al elemento principal. |
| Cuando desee colocar un nuevo elemento encima de otro que ya existe, es mejor usar el método jQuery offset(). | Cuando desee colocar un nuevo elemento cerca de otro elemento DOM dentro del mismo contenedor, es mejor usar el método jQuery position(). |
| El método offset() se usa principalmente en funciones de arrastrar y soltar. | El método position() se usa para colocar un elemento en relación con el documento, la ventana u otros elementos como el mouse o el cursor. |
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA