← Back to jQuery Course | Chapter 6: CSS & Dimensions | Lesson 3 of 6

Element Width और Height

width() किसी element की content width get या set करता है।
Syntax
javascript
$(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()

javascript
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
    .box { background: steelblue; color: white; border: 2px solid navy; padding: 10px; margin: 8px 0; }
    #parent { width: 400px; max-width: 100%; border: 2px dashed #888; background: #eee; padding: 0; }
    #parent .box { margin: 0; }
  </style>
</head>
<body>
  <button id="runBtn">Read width()</button><button id="resetBtn" class="secondary">Reset</button>
  <div id="box" class="box" style="width:200px">Box (CSS width: 200px)</div>
  <div id="output"></div>
  <script>
    $("#runBtn").click(function () {
      $("#output").text("width() = " + $("#box").width() +
        "\n(content only: the 10px padding on each side and 2px border on each side are NOT counted)");
    });
    $("#resetBtn").click(function () { $("#output").text(""); });
  </script>
</body>
</html>

उदाहरण: width() vs innerWidth() vs outerWidth() Diagram

javascript
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
    #wrap { display: flow-root; width: fit-content; max-width: 100%; }
    #box { width: 150px; height: 60px; padding: 20px; border: 8px solid navy; background: #ffb74d; margin: 0; }
    #content { height: 100%; background: steelblue; color: white; text-align: center; line-height: 60px; }
    .legend { margin: 10px 0; font-size: 13px; }
    .legend span.sw { display: inline-block; width: 14px; height: 14px; vertical-align: middle; margin: 0 4px 0 12px; border: 1px solid #333; }
    .legend span.sw:first-child { margin-left: 0; }
    .sw.c { background: steelblue; } .sw.p { background: #ffb74d; } .sw.b { background: navy; }
    .bar { height: 22px; margin: 6px 0; width: 0; color: #fff; font-size: 12px; line-height: 22px; white-space: nowrap; overflow: hidden; transition: width .4s; }
    #barW { background: steelblue; }
    #barI { background: linear-gradient(90deg, #ffb74d 0 20px, steelblue 20px calc(100% - 20px), #ffb74d calc(100% - 20px)); }
    #barO { background: linear-gradient(90deg, navy 0 8px, #ffb74d 8px 28px, steelblue 28px calc(100% - 28px), #ffb74d calc(100% - 28px) calc(100% - 8px), navy calc(100% - 8px)); }
    .bar b { padding-left: 4px; text-shadow: 0 0 3px #000; }
  </style>
</head>
<body>
  <button id="runBtn">Measure the box</button><button id="resetBtn" class="secondary">Reset</button>
  <div class="legend"><span class="sw c"></span>content <span class="sw p"></span>padding <span class="sw b"></span>border</div>
  <div id="wrap"><div id="box"><div id="content">content</div></div></div>
  <div id="barW" class="bar"></div>
  <div id="barI" class="bar"></div>
  <div id="barO" class="bar"></div>
  <div id="output"></div>
  <script>
    function measure() {
      var w = $("#box").width(), i = $("#box").innerWidth(), o = $("#box").outerWidth();
      $("#barW").css("width", w).html("<b>width() = " + w + "</b>");
      $("#barI").css("width", i).html("<b>innerWidth() = " + i + "</b>");
      $("#barO").css("width", o).html("<b>outerWidth() = " + o + "</b>");
      $("#output").text("width()=" + w + ", innerWidth()=" + i + ", outerWidth()=" + o +
        "\ncontent " + w + " + padding " + (i - w) + " = innerWidth " + i +
        "\ninnerWidth " + i + " + border " + (o - i) + " = outerWidth " + o);
    }
    $("#runBtn").click(measure);
    $("#resetBtn").click(function () {
      $(".bar").css("width", 0).empty();
      $("#output").text("");
    });
  </script>
</body>
</html>

height()

height() width() जैसे ही तरीके से किसी element की content height get या set करता है, दोनों directions में padding, border, और margin को नज़रअंदाज़ करते हुए। साथ में, दोनों आपको किसी element के content box size पर precise control देते हैं।

उदाहरण: height()

javascript
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
    .box { background: steelblue; color: white; border: 2px solid navy; padding: 10px; margin: 8px 0; }
    #parent { width: 400px; max-width: 100%; border: 2px dashed #888; background: #eee; padding: 0; }
    #parent .box { margin: 0; }
  </style>
</head>
<body>
  <button id="runBtn">Read height()</button><button id="resetBtn" class="secondary">Reset</button>
  <div id="box" class="box" style="height:100px">Box (CSS height: 100px)</div>
  <div id="output"></div>
  <script>
    $("#runBtn").click(function () {
      $("#output").text("height() = " + $("#box").height() +
        "\n(content only: the 10px padding on top/bottom and 2px border are NOT counted)");
    });
    $("#resetBtn").click(function () { $("#output").text(""); });
  </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

javascript
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
    .box { background: steelblue; color: white; border: 2px solid navy; padding: 10px; margin: 8px 0; }
    #parent { width: 400px; max-width: 100%; border: 2px dashed #888; background: #eee; padding: 0; }
    #parent .box { margin: 0; }
  </style>
</head>
<body>
  <button id="runBtn">Set 200 x 200</button><button id="resetBtn" class="secondary">Reset</button>
  <div id="box" class="box" style="width:100px;height:100px">Box</div>
  <div id="output"></div>
  <script>
    var origStyle = $("#box").attr("style");
    $("#runBtn").click(function () {
      var before = $("#box").width() + " x " + $("#box").height();
      $("#box").width(200).height(200);
      var after = $("#box").width() + " x " + $("#box").height();
      $("#output").text("Before: " + before + "\nAfter:  " + after);
    });
    $("#resetBtn").click(function () {
      $("#box").attr("style", origStyle);
      $("#output").text("");
    });
  </script>
</body>
</html>

उदाहरण: Grow and Shrink with Before/After Values

javascript
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
    .box { background: steelblue; color: white; border: 2px solid navy; padding: 10px; margin: 8px 0; }
    #parent { width: 400px; max-width: 100%; border: 2px dashed #888; background: #eee; padding: 0; }
    #parent .box { margin: 0; }
  </style>
</head>
<body>
  <button id="runBtn">Grow +50px</button><button id="shrinkBtn">Shrink -50px</button><button id="resetBtn" class="secondary">Reset</button>
  <div id="box" class="box" style="width:100px;height:60px">Box</div>
  <div id="output"></div>
  <script>
    var origStyle = $("#box").attr("style");
    function change(delta) {
      var before = $("#box").width() + " x " + $("#box").height();
      $("#box").width(function (i, w) { return Math.max(40, w + delta); })
               .height(function (i, h) { return Math.max(30, h + delta); });
      $("#output").text("Before: " + before + "\nAfter:  " + $("#box").width() + " x " + $("#box").height());
    }
    $("#runBtn").click(function () { change(50); });
    $("#shrinkBtn").click(function () { change(-50); });
    $("#resetBtn").click(function () {
      $("#box").attr("style", origStyle);
      $("#output").text("");
    });
  </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

javascript
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
    .box { background: steelblue; color: white; border: 2px solid navy; padding: 10px; margin: 8px 0; }
    #parent { width: 400px; max-width: 100%; border: 2px dashed #888; background: #eee; padding: 0; }
    #parent .box { margin: 0; }
  </style>
</head>
<body>
  <button id="runBtn">Set width("50%")</button><button id="resetBtn" class="secondary">Reset</button>
  <div id="parent"><div id="box" class="box" style="width:25%">Box</div></div>
  <div id="output"></div>
  <script>
    var origStyle = $("#box").attr("style");
    $("#runBtn").click(function () {
      var before = $("#box").width();
      $("#box").width("50%");
      $("#output").text("Parent width(): " + $("#parent").width() + "px" +
        "\nBefore (25%): box width() = " + before + "px" +
        "\nAfter  (50%): box width() = " + $("#box").width() + "px");
    });
    $("#resetBtn").click(function () {
      $("#box").attr("style", origStyle);
      $("#output").text("");
    });
  </script>
</body>
</html>

Dimensions पढ़ना

Dimensions पढ़ना तब उपयोगी है जब आपको JavaScript में layout decisions लेने हों, जैसे यह तय करना कि क्या कोई element किसी tooltip को अपने बगल में fit करने के लिए काफ़ी wide है। क्योंकि ये methods live values return करते हैं, वे हमेशा element की current rendered size को reflect करते हैं।

उदाहरण: Reading Dimensions

javascript
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
    .box { background: steelblue; color: white; border: 2px solid navy; padding: 10px; margin: 8px 0; }
    #parent { width: 400px; max-width: 100%; border: 2px dashed #888; background: #eee; padding: 0; }
    #parent .box { margin: 0; }
  </style>
</head>
<body>
  <button id="runBtn">Check width</button><button id="shrinkBtn">Shrink to 80px</button><button id="resetBtn" class="secondary">Reset</button>
  <div id="box" class="box" style="width:150px">Box</div>
  <div id="output"></div>
  <script>
    var origStyle = $("#box").attr("style");
    function check() {
      var w = $("#box").width();
      $("#output").text("width() = " + w + "\n" + (w > 100 ? "Wide enough for a tooltip" : "Too narrow for a tooltip"));
    }
    $("#runBtn").click(check);
    $("#shrinkBtn").click(function () { $("#box").width(80); check(); });
    $("#resetBtn").click(function () {
      $("#box").attr("style", origStyle);
      $("#output").text("");
    });
  </script>
</body>
</html>
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. यह उम्मीद करना कि .width() padding और border शामिल करेगा, जबकि यह सिर्फ content width return करता है, इसलिए 20px padding वाला 200px भी 200 ही देता है।
  2. गलत जगह unit वाली एक string pass करना, जैसे .width("200"), जबकि एक number या "200px" जैसी unit वाली string साफ़ form है।
  3. display:none वाले किसी hidden element पर .width() पढ़ना और value पर भरोसा करना, जो गलत या zero हो सकती है।
🔒

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.