Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Como saber el alto y ancho de una elemento con javascript

javascript-y-jquery
Con el siguiente ejemplo podemos saber el ancho y el alto de un elemento utilizando un poco de javascript y jquery, en este caso utilizaremos un div aunque en teoría podemos hacerlo con cualquier tipo elemento html.

Este tipo de funciones viene bastante bien cuando hacemos acciones dinámicas ya que podemos adaptar contenidos dependiendo del tamaño de algunos elementos.

Con las funciones width y height de jquery lo tenemos bastante fácil aunque hay que tener en cuenta que si queremos obtener las medidas de un elemento dinámico tenemos que espera a que el documento este totalmente cargado y después ejecutar las funciones.

En el ejemplo vemos como hacerlo de una manera muy sencilla:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>

 $(document).ready(function(){
	//Alto del elemento
	var alto=$('.ejemplo').height();
	//Ancho del elemento
	var ancho=$('.ejemplo').width();

	$('#res').append('<p>El ancho de este elemento es de ' + ancho + ' pixeles y el alto es de ' + alto + ' pixeles</p>');
	console.log('El ancho de este elemento es de ' + ancho + ' pixeles y el alto es de ' + alto + ' pixeles');
 })

</script>


<div class="ejemplo">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, suscipit dicta unde quia culpa eius blanditiis fugit. Tenetur delectus quas quibusdam vero, reiciendis animi magni aperiam dolor ipsum qui sequi.
</div>

<div id="res"></div>


<style>
	.ejemplo {
    max-width: 400px;
    background: #bdffda;
    color: #19904d;
    font-family: sans-serif;
	}
</style>
Demo
Editado
1
Puntos
0
Resp
291
Visitas
Por alber hace 5 meses
Administrador offline Sitio web

Relaccionados

Para comentar Inicia sesión o Registrate