Para obtener la ubicación de un elemento en relación con el documento, se utiliza el método jQuery offset() . 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. También podemos usar el método jQuery position() . El método position() es un método incorporado en jQuery que se usa para encontrar la posición del primer elemento coincidente en relación con su elemento principal en el árbol DOM.
Sintaxis:
$(selector).offset()
Los siguientes ejemplos ilustran el enfoque anterior:
Ejemplo 1:
<!DOCTYPE html> <html> <head> <title> How to get the Location of an element relative to the document using jQuery? </title> <style> h1 { color: green; } body { text-align: center; } </style> <script src= "https://code.jquery.com/jquery-1.12.4.min.js"> </script> </head> <body> <h1>GeeksforGeeks</h1> <b> How to get the Location of an element relative<br> to the document using jQuery/JavaScript? </b> <br><br> <div id="Logo"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200121112744/logo11.png"> </div> <br><br> <button type="button">Click</button> <h4></h4> <script> $(document).ready(function() { $("button").click(function() { var offset = $("#Logo").offset(); $("h4").text("Location of the box is: (left: " + offset.left + ", top: " + offset.top + ")"); }); }); </script> </body> </html>
Producción:
Ejemplo 2:
<!DOCTYPE html> <html> <head> <title> How to get the Location of an element relative to the document using jQuery? </title> <style> h1 { color: green; } body { text-align: center; } </style> <script src= "https://code.jquery.com/jquery-1.12.4.min.js"> </script> </head> <body> <h1>GeeksforGeeks</h1> <b> How to get the Location of an element relative<br> to the document using jQuery/JavaScript? </b> <br><br> <div id="Logo"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200121112744/logo11.png"> </div> <br><br> <button type="button">Click</button> <h4></h4> <script> $(document).ready(function() { $("button").click(function(){ var position = $("#Logo").position(); $("h4").text("Location of the Logo is: (left: " + position.left + ", top: " + position.top + ")"); }); }); </script> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA