jQuery में width और height methods

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

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

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

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

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

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

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

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

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

html<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>

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