What is the difference between the values returned by .width() from jQuery, .css('width') from jQuery, and the .style.width attribute on a node?

I'm curious because, in trying to set the width of two table cells to be equal, the first two gave me the same wrong answer. What are they actually measuring, and why is it not the same as the value that I can see in the .style attribute when I view the element in a browser?

What is the difference between the values returned by .width() from jQuery, .css('width') from jQuery, and the .style.width attribute on a node?

I'm curious because, in trying to set the width of two table cells to be equal, the first two gave me the same wrong answer. What are they actually measuring, and why is it not the same as the value that I can see in the .style attribute when I view the element in a browser?

• javascript
• jquery

• Yeah that above needs to be deleted but it won't let me for some strange reason – iConnor Commented Jul 5, 2013 at 18:28
• Check this jsfiddle: jsfiddle.net/EjPBy – A. Wolff Commented Jul 5, 2013 at 18:41
• Just modified @A.Wolff's code to show the widths, but for sytle.width, there's still notthing showed.. – bonCodigo Commented Sep 8, 2014 at 4:10

5 Answers 5

From width official documentation

The difference between .css(width) and .width() 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 .width() method is recommended when an element's width needs to be used in a mathematical calculation.

I'd say there is no difference between .css('width') and .style.with as css() method is used to set style object properties.

The difference between .css('width') / .width() and .style.with is that jQuery methods get the computed style using window.getComputedStyle( elem, null ). This method is used to read the actual property after CSS and styles are applied.

Complementing Claudio Redi's answer: see the difference live: http://jsfiddle.net/vovkss/kPXaB/

I've used cm units intentionally to demonstrate that the output of .css('width') may be converted to pixels (or other units), while .width() is always an integer value representing a number of pixels.

Note that .style.width only applies to inline styles.

• HTML:

  <div id="mydivInlineStyle" style="width: 10cm"><b>Inline style:</b>
  </div>
  
  <div id="mydivExternalStylesheet"><b>External stylesheet:</b> 
  </div>
  

• CSS:

  div { 
    width: 10cm; 
    border: 10px solid blue; padding: 11px; margin: 12px; 
    background: aqua; white-space: pre; 
  }
  

• JS:

  $('div').each(function(){ 
    $(this).append(
      'jQuery width(): ' + $(this).width() + "\n" + 
      '.css(\'width\'): ' + $(this).css('width') + "\n" + 
      '.style.width: ' + this.style.width
    ); 
  });
  

• Output:

  Inline style: 
    jQuery width(): 378 
    .css('width'): 378px 
    .style.width: 10cm
  
  External stylesheet: 
    jQuery width(): 378 
    .css('width'): 378px 
    .style.width: 
  

There is also a difference in "intended width" vs. real width. .width() will give you the content width of an element, .css("width") will give you the width as intended by the style sheet.

.css('width') returns the attribute with the unit appended while .width() does not, it will give you the number in pixels.

So if you have an element with a width of 200px .css('width') will return "200px" while .width() will return 200.

.width() will give you what is applied .css('width') will give you what is in the style attribute