jQuery-тегінің innerWidth және innerHeight әдістері

innerWidth және innerHeight әдістерінің көмегімен біз элементтердің ені мен биіктігін аламыз, бірақ қазірдің өзінде тек мазмұнды емес, сонымен қатар ішкі шектеулерді де - padding ескереді.

#test абзацының ені мен биіктігінің мәндерін алайық, бірақ қазір innerWidth және innerHeight көмегімен, және оларды басқа абзацқа шығарайық. Бізде екі абзац болсын:

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

CSS келесідей көрінеді:

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

Javascript-те келесі кодты жазамыз:

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

Көріп отырғаныңыздай, мәндер қазір 10px-ке ерекшеленеді, себебі ішкі шектеулер ескеріледі, бұл біздің жағдайда барлық жақтан 5px-ті құрайды.

Сондай-ақ, innerWidth және innerHeight әдістерінің көмегімен біз элементтердің ені мен биіктігінің мәндерін өзгерте аламыз. Мысалы, #test1 дивінің енін 250px-ке тең етіп қояйық, ал #test2 биіктігін 200px-ке тең етіп қояйық:

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