jQueryの.width（）、style.width、jQuery .css（ 'width'）の違いは何ですか？

Question

.width()から返された値と、ノードの.style.width属性との差は、jQueryから.css('width')、jQueryからは.style.widthです。

2つの表のセルの幅を等しく設定しようとすると、最初の2つのセルが同じ誤った答えを与えてしまったので、私は不思議です。実際に何が測定されているのですか？また、ブラウザで要素を表示するときに、.style属性に表示される値と同じではないのはなぜですか？

Answer 1

の.css（幅）と.width（差

公式ドキュメントwidthから）後者は、（例えば、400）、無単位の画素値を返すことである前者戻る一方値単位はそのままです（例：400px）。 .width（）メソッドは、要素の幅を数学的計算で使用する必要がある場合に推奨されます。

私はスタイルオブジェクトのプロパティを設定するために使用されて css()方法として .css('width')と .style.with差がないと思います。 は

.css('width')/.width()と.style.withの違いは、jQueryのメソッドはwindow.getComputedStyle(elem, null)を使用して計算されたスタイルを取得することです。このメソッドは、CSSとスタイルの適用後に実際のプロパティを読み込むために使用されます。

Answer 2

.width（）

Answer 3

の.cssスタイル属性である何を与えるだろう（「幅」）appiedれるもの の.cssをお渡しします（「幅」）単位付加しながら、持つ属性を返します。 .width（）はそうではありませんが、ピクセル単位で表示されます。

あなたは200pxのの.css（「幅」）の幅を持つ要素を持っている場合.widthながらそう（「200pxの」を返しますが）200

Answer 4

「意図幅」の違いもありますが返されます。実幅に対する。 .width（）は要素の内容の幅を与え、.css（ "width"）はスタイルシートが意図する幅を与えます。ライブの違いを参照してください：クラウディオREDIの答え補完

Answer 5

http://jsfiddle.net/vovkss/kPXaB/

を私は.css('width')の出力はピクセル（または他のユニット）に変換することができることを実証するために、意図的にcm単位を使用しましたが、 .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: