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

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

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

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

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

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

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

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

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

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

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

Бірінші есептің шешімін толықтырыңыз - #wrapper дивінің астындағы екінші абзацқа #wrapper дивінің ені мен биіктігінің мәндерін шығарыңыз, бұл жолы ішкі шектеулерді ескере отырып, бірақ шектер мен сыртқы шектеулерді ескермей.