.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

Answer 3

var elH = someElement.height();           // 200

.height() returns a Number, while

var elH = someElement.css("height");      // "200px"

above jQuery accesses the element's style property like JS would in:

var height = someDOMelement.style.height; // "200px"

returning a String value in px.

Answer 4

they will also return/set different values (not talking about the 'px' suffix)

if you have box-sizing: border-box

see this example: http://jsbin.com/fugusixila/edit?html,css,js,console,output

Answer 5

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 6

.width returns a unitless value, where as .css("width") returns the css value, width should be used with mathematical calculations

http://api.jquery.com/width/

Answer 7

Yeap!
Main thing is, as most everyone told ".height() returns a unit-less pixel value".

But the question remains: Why is this so...?... Why was this thought this way?

@Jay Blanchard well said it: "The .height() method is recommended when an element's height needs to be used in a mathematical calculation."

So, if I may added, use "CSS" dim's everytime you deal with native stand-alone browser reactions - very handy to compute/react to elements disposition on a responsive window/div re-dimension process.

Use width() / height() to compute JQuery effect results, like hide()/show() inner layers (as you know won't affect CSS height).
Note also that CSS height property, for instance, does not include padding, border, or margin (you don't have inner X / outer X CSS dim's). So these must be computed.

Take a look at jQuery: Get height of hidden element in jQuery

Answer 8

By now people should know that one should be used for maths, and the other shouldn't...

Or should it?

I did a little speed test on the various options and according to my findings:

1. It is faster to grab the width with .css
2. It is faster to set the width with .width

So in other words, to do a grab something and set another, you probably should:

$('#element1').width(parseInt($('#element2').css('width'), 10));

Answer 9

".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/

Answer 10

Since this was the first hit in google when I was trying to remember the difference between the two, I thought I'd give a little more explanation with an example.

I have a div called myDiv like this:

border:1px solid black;
padding-right: 15px;
padding-left:15px;
margin-right:10px;
margin-left:10px

Console gives me this:

$('#myDiv').css('width') = 1100px;
$('#myDiv').width() = 1068;

1100 includes the 15 pixels for the right padding, the 15 pixels for the left padding, 2 pixels for the border(1 for each side) but NOT the margins. At least for me in chrome. 1068+15+15+1+1 = 1100

Yes, there is overhead for doing Number($('#myDiv').css('width').replace('px', '')) but you only have to do it once each time. And you do have to cast the result as a Number, assuming that you want Number($('#myDiv').css('width').replace('px', '')) + 99 to be 1199. Otherwise you get 110099 as the answer.