Como saber el alto y ancho de una elemento con javascript

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