javascript - jQuery .width()、style.width、および jQuery .css('width') の違いは何ですか?

Question

.width()jQuery.css('width')から、jQuery から、およびノー​​ドの.style.width属性から返される値の違いは何ですか?

2 つのテーブル セルの幅を等しく設定しようとしたときに、最初の 2 つのセルで同じ間違った答えが得られたので、興味があります。.style彼らは実際に何を測定しているのでしょうか? また、ブラウザで要素を表示したときに属性に表示される値と同じではないのはなぜですか?

Answer 1

Claudio Redi の回答を補完する: ライブの違いを参照してください: http://jsfiddle.net/vovkss/kPXaB/

の出力をピクセル(または他の単位) に変換できることを示すために意図的cmに単位を使用しましたが、は常にピクセル数を表す整数値です。.css('width') .width()

.style.widthインライン スタイルにのみ適用されることに注意してください。

• 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
    ); 
  });
  

• 出力：

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