Metodele innerWidth și innerHeight în jQuery
Cu ajutorul metodelor innerWidth și
innerHeight obținem lățimea și înălțimea
elementelor, dar de data aceasta luând în considerare nu doar conținutul, ci
și spațiile interioare - padding.
Hai să obținem valorile lățimii și înălțimii paragrafului
#test, dar de data aceasta folosind innerWidth și
innerHeight, și să le afișăm în alt paragraf. Să presupunem că
avem două paragrafe:
<p id="test">text</p>
<p id="out"></p>
CSS-ul arată astfel:
p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}
În Javascript scriem următorul cod:
let w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Lățime: ' + w + ' Înălțime: ' + h);
După cum vedeți, valorile diferă deja cu 10px,
deoarece sunt luate în considerare spațiile interioare, care în
cazul nostru sunt de 5px de pe toate părțile.
De asemenea, cu ajutorul metodelor innerWidth și
innerHeight putem
modifica valorile lățimii și înălțimii elementelor.
De exemplu, să setăm lățimea div-ului #test1
la 250px, iar înălțimea #test2 - la 200px:
$('#test1').innerWidth(250);
$('#test2').innerHeight(200);
Completați soluția primei probleme - afișați
în al doilea paragraf sub div-ul #wrapper
valorile lățimii și înălțimii div-ului #wrapper, de
data aceasta luând în considerare spațiile interioare, dar fără
a lua în considerare marginile și spațiile exterioare.
