Métodos innerWidth e innerHeight en jQuery

Con los métodos innerWidth y innerHeight obtenemos el ancho y alto de los elementos, pero esta vez incluyendo no solo el contenido, sino también los rellenos internos - padding.

Obtengamos los valores de ancho y alto del párrafo #test, pero esta vez usando innerWidth y innerHeight, y mostrémoslos en otro párrafo. Tengamos dos párrafos:

html<p id="test">text</p>
<p id="out"></p>

El CSS se ve así:

cssp {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}

En Javascript escribimos el siguiente código:

javascriptlet w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

Como pueden ver, los valores ya difieren en 10px, ya que se tienen en cuenta los rellenos internos, que en nuestro caso son de 5px por todos lados.

También de manera sencilla usando los métodos innerWidth y innerHeight podemos cambiar los valores de ancho y alto de los elementos. Por ejemplo, establezcamos el ancho del div #test1 en 250px, y el alto de #test2 en 200px:

javascript$('#test1').innerWidth(250);
$('#test2').innerHeight(200);