Metodes width en height in jQuery

Metodes width en height kry, onderskeidelik, die breedte en hoogte van die inhoud van 'n element sonder om padding, border en margin in ag te neem.

Kom ons kry die breedte en hoogte waardes van die paragraaf #test en druk dit in 'n ander paragraaf uit. Neem, byvoorbeeld, die volgende HTML kode:

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

CSS styl vir die paragraaf lyk so:

p {
	margin: 10px;
	padding: 5px;
}

Nou skryf ons die Javascript kode:

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

Net so eenvoudig kan ons met hierdie metodes die breedte en hoogte waardes van elemente verander. Byvoorbeeld, laat ons die breedte van div #test1 stel op 250px, en die hoogte van #test2 op 200px:

$('#test1').width(250);
$('#test2').height(200);

Ons het die volgende opmaak:

<div id="wrapper">
<div id="test">teks</div>
</div>
<p id="one"></p>
<p id="two"></p>
<p id="three"></p>
<p id="four"></p>

Die volgende CSS style:

div {
margin: 10px;
padding: 5px;
border: 2px solid green;
}
#wrapper {
border-color: blueviolet;
}

Kry en druk die breedte en hoogte waardes van die div #wrapper uit sonder om spasiering en grense in ag te neem. Druk die waardes uit in die eerste paragraaf onder hierdie div.