Métodos innerWidth e innerHeight no jQuery
Com a ajuda dos métodos innerWidth e
innerHeight, obtemos a largura e a altura
dos elementos, mas já levando em consideração não apenas o conteúdo, mas
também os preenchimentos internos - padding.
Vamos obter os valores de largura e altura do parágrafo
#test, mas agora usando innerWidth e
innerHeight, e exibi-los em outro parágrafo. Vamos supor que
tenhamos dois parágrafos:
<p id="test">text</p>
<p id="out"></p>
O CSS fica assim:
p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}
Em Javascript, escrevemos o seguinte código:
let w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);
Como você pode ver, os valores já diferem em 10px,
pois são considerados os preenchimentos internos, que no
nosso caso são de 5px em todos os lados.
Também podemos facilmente, usando os métodos innerWidth e
innerHeight,
alterar os valores de largura e altura dos elementos.
Por exemplo, vamos definir a largura da div #test1
como 250px e a altura de #test2 como 200px:
$('#test1').innerWidth(250);
$('#test2').innerHeight(200);
Complete a solução da primeira tarefa - exiba
no segundo parágrafo abaixo da div #wrapper
os valores de largura e altura da div #wrapper,
desta vez levando em consideração os preenchimentos internos, mas sem
considerar as bordas e as margens externas.
