Curso jQuery: 10 Tamaño y posicion

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);
});

Comparte en tus redes sociales