JQuery posee diferentes funciones para calcular el tamaño y la posición de los elementos de las paginas web, para calcular el ancho y alto del componente seleccionado podemos usar una de las siguientes funciones
.innerWidth(); Devuelve el ancho del elemento seleccionado, incluyendo el padding
.innerHeight();Devuelve el alto del elemento seleccionado, incluyendo el padding
.outerWidth(); Devuelve el ancho del elemento seleccionado, incluyendo el padding y el borde
.outerHeight();Devuelve el alto del elemento seleccionado, incluyendo el padding
estas 4 funciones no devuelven el ancho y alto del documento o la ventana para ello tendremos que usar
.width(); Devuelve el ancho del elemento seleccionado sin incluir el padding
.height(); Devuelve el alto del elemento seleccionado sin incluir el padding
La diferencia entre .width() y .css(width) es que el primero lo devuelve sin el texto px l oque devolveria por ejemplo 400px.
Supongamos que tenemos un div y queremos comprobar sus medidas, podríamos hacer algo similar a:
<style type="text/css"> .caja1{ background-color: blue; height:400px; width:400px; position:relative; left:400px; border: 2px solid #ffff00; padding:10px; margin:10px; } </style> </head> <body> <div class="caja1"></div> <div style="position:absolute; top:0px;"> <br><a href="javascript:void(0);" class="tamano">Tamaño caja</a> <div class="resultado"></div> </div> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(e){ $(".tamano").click(function (e){ var anchointerno=$(".caja1").innerWidth(); var altointerno=$(".caja1").innerHeight(); var anchoexterno=$(".caja1").outerWidth(); var altoexterno=$(".caja1").outerHeight(); var ancho=$(".caja1").width(); var alto=$(".caja1").height(); var texto="medidas internas: ancho "+anchointerno+ " alto "+ altointerno; texto+="<br>Medidas externas: ancho "+anchoexterno+" alto "+altoexterno; texto+="<br>Medidas: ancho "+ancho+" alto "+alto; $(".resultado").html(texto); }); }); </script>
Cuando queremos averiguar la posición usaremos la función offset(), la cual nos devuelve las coordenadas del elemento seleccionado haciendo falta un .top y . left para obtenerlas.
var pos=$(".caja1").offset() var left=pos.left; var top=pos.top;
Supongamos que queremos poner unas flechas para que ejemplo anterior se mueva la caja.
<img src="abajo.png" width="40" height="40" alt="" class="abajo"/> <img src="arriba.png" width="40" height="40" alt="" class="arriba"/> <br><img src="izquierda.png" width="40" height="40" alt="" class="izquierda"/> <img src="derecha.png" width="40" height="40" alt="" class="derecha"/>
Quedando el código como sigue
$(".arriba").click(function(e){ var posicion=$(".caja1").offset(); var arriba=posicion.top-20; $(".caja1").animate({top:arriba},500); }); $(".abajo").click(function(e){ var posicion=$(".caja1").offset(); var arriba=posicion.top+10; $(".caja1").animate({top:arriba},500); }); $(".izquierda").click(function(e){ var posicion=$(".caja1").offset(); var izq=posicion.left-20; $(".caja1").animate({left:izq},500); }); $(".derecha").click(function(e){ var posicion=$(".caja1").offset(); var der=posicion.left+10; $(".caja1").animate({left:der},500); });