{"name":"height","type":"method","title":".height()","deprecated":null,"removed":null,"desc":"Get the current computed height for the first element in the set of matched elements or set the height of every matched element.","categories":["css","dimensions","manipulation/style-properties","version/1.0","version/1.4.1"],"entries":[{"return":"Number","signatures":{"added":"1.0"},"examples":{"desc":"Show various heights.  Note the values are from the iframe so might be smaller than you expected.  The yellow highlight shows the iframe body.","code":"\nfunction showHeight( element, height ) {\n  $( \"div\" ).text( \"The height for the \" + element + \" is \" + height + \"px.\" );\n}\n$( \"#getp\" ).click(function() {\n  showHeight( \"paragraph\", $( \"p\" ).height() );\n});\n$( \"#getd\" ).click(function() {\n  showHeight( \"document\", $( document ).height() );\n});\n$( \"#getw\" ).click(function() {\n  showHeight( \"window\", $( window ).height() );\n});\n","css":"\n  body {\n    background: yellow;\n  }\n  button {\n    font-size: 12px;\n    margin: 2px;\n  }\n  p {\n    width: 150px;\n    border: 1px red solid;\n  }\n  div {\n    color: red;\n    font-weight: bold;\n  }\n","html":"\n<button id=\"getp\">Get Paragraph Height</button>\n<button id=\"getd\">Get Document Height</button>\n<button id=\"getw\">Get Window Height</button>\n\n<div>&nbsp;</div>\n<p>\n  Sample paragraph to test height\n</p>\n"},"desc":"Get the current computed height for the first element in the set of matched elements.","longdesc":"\n      <p>The difference between <code>.css( \"height\" )</code> and <code>.height()</code> is that the latter returns a unit-less pixel value (for example, <code>400</code>) while the former returns a value with units intact (for example, <code>400px</code>). The <code>.height()</code> method is recommended when an element's height needs to be used in a mathematical calculation.</p>\n      <p class=\"image\">\n        <img src=\"/resources/0042_04_01.png\"/>\n      </p>\n      <p>This method is also able to find the height of the window and document.</p>\n      <pre><code>\n$( window ).height(); // returns height of browser viewport\n$( document ).height(); // returns height of HTML document\n      </code></pre>\n      <p>Note that <code>.height()</code> will always return the content height, regardless of the value of the CSS <code>box-sizing</code> property. As of jQuery 1.8, this may require retrieving the CSS height plus <code>box-sizing</code> property and then subtracting any potential border and padding on each element when the element has <code>box-sizing: border-box</code>. To avoid this penalty, use <code>.css( \"height\" )</code> rather than <code>.height()</code>.</p>\n      <div class=\"warning\">\n        <p><strong>Note:</strong> Although <code>style</code> and <code>script</code> tags will report a value for <code>.width()</code> or <code>height()</code> when absolutely positioned and given <code>display:block</code>, it is strongly discouraged to call those methods on these tags. In addition to being a bad practice, the results may also prove unreliable.</p>\n      </div>\n    "},{"return":"jQuery","signatures":[{"added":"1.0","argument":{"desc":"An integer representing the number of pixels, or an integer with an optional unit of measure appended (as a string).","type":[{"name":"String"},{"name":"Number"}],"name":"value"}},{"added":"1.4.1","argument":{"desc":"A function returning the height to set. Receives the index position of the element in the set and the old height as arguments. Within the function, <code>this</code> refers to the current element in the set.","name":"function(index, height)","type":"Function"}}],"examples":{"desc":"To set the height of each div on click to 30px plus a color change.","code":"\n$( \"div\" ).one( \"click\", function() {\n  $( this ).height( 30 ).css({\n    cursor: \"auto\",\n    backgroundColor: \"green\"\n  });\n});\n","css":"\n  div {\n    width: 50px;\n    height: 70px;\n    float: left;\n    margin: 5px;\n    background: rgb(255,140,0);\n    cursor: pointer;\n  }\n","html":"\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n<div></div>\n"},"desc":"Set the CSS height of every matched element.","longdesc":"\n      <p>When calling <code>.height(value)</code>, the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, a valid CSS measurement must be provided for the height (such as <code>100px</code>, <code>50%</code>, or <code>auto</code>). Note that in modern browsers, the CSS height property does not include padding, border, or margin.</p>\n      <p>If no explicit unit was specified (like 'em' or '%') then \"px\" is concatenated to the value.</p>\n      <p>Note that <code>.height(value)</code> sets the content height of the box regardless of the value of the CSS <code>box-sizing</code> property.</p>\n    "}]}