.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()

Answer 1

I have provided this answer because the question was asking about things you can do with css() and not width() and vice versa. There is an interesting case for page elements which are hidden.

I had a situation recently where I needed to move some elements dynamically that were sometimes hidden, sometimes not when the page loaded. When the elements were not hidden, it was easy to just use the elements actual width to create the new DOM structure. But when the elements are hidden, using .width() returned 0, and rightly so. So I needed to add some CSS width info to the elements class and from that I was able to create a statement like

var width = $('#element').width() == 0 ? parseInt($('#element').css('width')) : $('#element').width();

This enabled me to ensure I was using the width when it was available, but also providing a fallback value for when the element was hidden.

Hopefully this adds to the understanding of the difference between what you can do with these two methods.

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

Answer 3

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 4

".height() will always return the content height, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS height plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css( "height" ) rather than .height()"

http://api.jquery.com/height/