jQuery да width ва height методлари

width ва height методлари мос равишда элементнинг padding, border ва marginни ҳисобга олмаган ҳолдаги контент эни ва баландлигини олади.

Келгила #test абзацнинг эн ва баландлик қийматларини олиб, бошқа абзацга чиқарайлик. Мисол учун, куйидаги HTML кодини оламиз:

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

Абзацнинг CSS услуби куйидагича:

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

Энди Javascript кодини ёзамиз:

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

Шунингдек, ушбу методлар ёрдамида биз элементларнинг эн ва баландлик қийматларини ўзгартиришимиз мумкин. Мисол учун, келгила #test1 дивнинг энини 250px га, #test2 дивнинг баландлигини эса 200px га тенглаймиз:

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

Бизда куйидаги верстка мавжуд:

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

Куйидаги CSS стиллари:

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

#wrapper дивнинг четланиш ва чекларини ҳисобга олмаган ҳолдаги эн ва баландлик қийматларини олинг ва чиқаринг. Қийматларни шу дивнинг остидаги биринчи абзацга чиқаринг.