jQuery में width और height methods

width और height methods क्रमशः element की content की चौड़ाई और ऊंचाई प्राप्त करते हैं बिना padding, border और margin को शामिल किए।

आइए paragraph #test की चौड़ाई और ऊंचाई के values प्राप्त करें और उन्हें दूसरे paragraph में output करें। उदाहरण के लिए, निम्नलिखित HTML code लेते हैं:

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

Paragraph की CSS style इस प्रकार है:

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

अब Javascript code लिखते हैं:

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

इन methods की सहायता से हम आसानी से elements की चौड़ाई और ऊंचाई के values बदल भी सकते हैं। उदाहरण के लिए, आइए div #test1 की चौड़ाई 250px के बराबर set करें, और div #test2 की ऊंचाई - 200px:

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

हमारे पास इस प्रकार का markup है:

<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 styles:

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

Div #wrapper की चौड़ाई और ऊंचाई के values बिना margins और borders के प्राप्त करें और output करें। Values इस div के नीचे पहले paragraph में output करें।