JQuery & the .height() function

I recently covered a JQuery, Height, CSS & IE issue I discovered and have since had more time to review jQuery in more detail.

After reviewing the jQuery API I thought it only right to share some more technical info about jQuery and how the .height() function operates.


The jQuery function height() gets the current computer height for the first element in the sect of matched elements. It's important to note if the function finds more then one element it will only get the height of the FRIST element found, it won't get the height of any other elements.

The difference between .css('height') and .height() is that .height() returns a value without the px (e.g 100) while .css('height') will return the value with units intact (e.g 100px).

The .height() method can be used for any mathematical calculations. If you try to use .css('height') for calculations you may run into trouble.

If you'd like to set the height of an element you can do so using the .height( value ) method for this. You could also supply a function rather then a value, e.g .height( function(index, height) ).

When calling height(value) the value can be a string or a number. If a number is provided then jQuery assumes it's a pixel unit of measurement. Other valid options include 100px, 25% or auto.

Of course you should be prepared for all sorts of interesting results when trying to do any sort of CSS or Javascript, especially across a wide range of browsers (with many people still having to support IE6). No matter what new technology or framework is developed the rules are the same, debug, research and understand your code, and break complex tasks into smaller, manageable bits of work.

If you're keen on learning some jQuery using old school methods (you remember books right?) check some of these out.