Element Width और Height
In this page:
$(selector).width();
$(selector).height();
$(selector).width(value);width()
बिना argument के call किया गया, .width() सिर्फ element की inner content width return करता है, किसी भी padding, border, या margin को exclude करते हुए। इसके बजाय एक number या CSS value pass करें, और यह सीधे उस content width को set कर देता है।
उदाहरण: width()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box" style="width:200px;padding:20px">Box</div>
<script>
console.log($("#box").width());
</script>
</body>
</html>height()
height() width() जैसे ही तरीके से किसी element की content height get या set करता है, दोनों directions में padding, border, और margin को नज़रअंदाज़ करते हुए। साथ में, दोनों आपको किसी element के content box size पर precise control देते हैं।
उदाहरण: height()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box" style="height:100px;padding:20px">Box</div>
<script>
console.log($("#box").height());
</script>
</body>
</html>Width और Height बदलना
Width और height को simple resizing के लिए साथ में बदला जा सकता है, जैसे user input के जवाब में किसी image container को एक नए size में scale करना। दोनों को एक साथ set करना element के proportions को आपके target किए गए design के साथ consistent रखता है।
उदाहरण: Changing Width and Height
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box" style="width:100px;height:100px">Box</div>
<script>
$("#box").width(200).height(200);
</script>
</body>
</html>Percentage Values इस्तेमाल करना
Width को '50%' जैसी percentage strings से set किया जा सकता है जब layout को एक fixed pixel value के बजाय अपने parent के size के responsive होना हो। jQuery उस percentage से असली pixel width calculate करता है लेकिन इसे वापस पढ़ने पर फिर भी pixel values return करता है।
उदाहरण: Using Percentage Values
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box" style="width:50%">Box</div>
<script>
$("#box").width("50%");
console.log($("#box").width());
</script>
</body>
</html>Dimensions पढ़ना
Dimensions पढ़ना तब उपयोगी है जब आपको JavaScript में layout decisions लेने हों, जैसे यह तय करना कि क्या कोई element किसी tooltip को अपने बगल में fit करने के लिए काफ़ी wide है। क्योंकि ये methods live values return करते हैं, वे हमेशा element की current rendered size को reflect करते हैं।
उदाहरण: Reading Dimensions
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box" style="width:150px">Box</div>
<script>
if ($("#box").width() > 100) {
console.log("Wide enough for a tooltip");
}
</script>
</body>
</html>- यह उम्मीद करना कि
.width()padding और border शामिल करेगा, जबकि यह सिर्फ content width return करता है, इसलिए 20px padding वाला 200px भी 200 ही देता है। - गलत जगह unit वाली एक string pass करना, जैसे
.width("200"), जबकि एक number या"200px"जैसी unit वाली string साफ़ form है। display:noneवाले किसी hidden element पर.width()पढ़ना और value पर भरोसा करना, जो गलत या zero हो सकती है।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: