.css(‘width’) and .css(‘height’) versus .width() and .height()

Question

Guys I've been asking around and nobody can really tell me the benefits of using .css(‘width’) and .css(‘height’) rather than .width() and .height().

I know that they both return the offset dimensions, which are the genuine dimensions of the element no matter how stretched it is by its inner content.

I'm guessing that there are some things that one can do and the other one cannot as I was using css() to return the dimensions of a window and document, where FF had no issues doing this but IE threw back an error at me. So I'm guessing that they might work in some browsers and but others. So would I have to use both together for 100% cross browser compatibility or just for certain cases?

Answer 1

From the .height() documentation -

The difference between .css('height') and .height() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .height() method is recommended when an element's height needs to be used in a mathematical calculation.

If you need to use height in a calculation get the value with .height().

Answer 2

Guys ive been asking around and no one can really tell me the benefits of using .css(‘width’) and .css(‘height’)rather then .width() and .height().

Querying CSS will give you the applied value as in 5px or 1em or what ever size is assigned to it.

Using jQuery you can use the following methods:

• .height (element height, without padding , margins or borders)
• .innerHeight (element height + padding)
• .outerHeight (element height + padding and borders)
• .outerHeight(true) (element height + padding + borders + margin)
• .width (element width, without padding , margins or borders)
• .innerWidth (element width + padding)
• .outerWidth (element width + padding and borders)
• .outerWidth(true) (element width + padding + borders + margin)

All of those methods will return just a number, representing the height/width units in pixels.

The benefit using jQuery is across browser you are able to be more in control of the exact width/height by being able to ignore/include margins, paddings or borders.

Furthermore, as those methods always return the units as a plain number it is easier to calculate with them as previously mentioned as you don't need to worry about the measurement itself, i.e: px, em, etc..

DEMO - Demonstrating height methods (same applies to width)

The demo above is using a div:

<div id="myDiv">My Div</div>

With the following CSS:

div{
    border: 1px solid blue;
    padding: 5px;
    margin: 10px;
}

Using this script:

var $div = $("#myDiv");
var height = $div.height();
var heightWithPadding = $div.innerHeight();
var heightWithPaddingAndBorder = $div.outerHeight();
var heightWithPaddingAndBorderAndMargin = $div.outerHeight(true);

var $result = $("#result");
$result.append("height: " + height);
$result.append("<br />height with padding: " + heightWithPadding);
$result.append("<br />height with padding and borders: " + heightWithPaddingAndBorder);
$result.append("<br />height with padding and borders and margin: " + heightWithPaddingAndBorderAndMargin);

Resulting in the following:

height: 20
height with padding: 30
height with padding and borders: 32
height with padding and borders and margin: 52