innerWidth en innerHeight metodes in jQuery

Met behulp van die metodes innerWidth en innerHeight kry ons die breedte en hoogte van elemente, maar hierdie keer met inagneming van nie net die inhoud nie, maar ook die binnevulling - padding.

Kom ons kry die breedte- en hoogtewaardes van die paragraaf #test, maar nou deur gebruik te maak van innerWidth en innerHeight, en druk dit in 'n ander paragraaf uit. Kom ons neem ons het twee paragrawe:

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

Die CSS lyk so:

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

In Javascript skryf ons die volgende kode:

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

Soos jy kan sien, verskil die waardes al met 10px, aangesien die binnevulling in ag geneem word, wat in ons geval aan alle kante 5px is.

Ons kan ook eenvoudig met behulp van die metodes innerWidth en innerHeight die breedte- en hoogtewaardes van elemente verander. Byvoorbeeld, laat ons die breedte van die div #test1 stel op 250px, en die hoogte van #test2 op 200px:

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

Voltooi die oplossing van die eerste taak - druk in die tweede paragraaf onder die div #wrapper die breedte- en hoogtewaardes van die div #wrapper uit, hierdie keer met inagneming van binnevulling, maar sonder inagneming van grense en buiteposisionering.