.width（）によって返された値を丸めないようにjQueryを作成するにはどうすればよいですか？

私は周りを検索しましたが、これを見つけることができませんでした。divの幅を取得しようとしていますが、小数点がある場合は数値を丸めます。

例：

#container{
    background: blue;
    width: 543.5px;
    height: 20px;
    margin: 0;
    padding: 0;
}

実行$('#container').width();すると、543.5ではなく543が返されます。数値を四捨五入せずに、完全な543.5（またはそれが何であるか）を返すにはどうすればよいですか。

Element.getBoundingClientRect要素のスタイルではなく、ネイティブを使用します。IE4で導入され、すべてのブラウザでサポートされています。

$("#container")[0].getBoundingClientRect().width

注：IE8以下については、MDNドキュメントの「ブラウザの互換性」のメモを参照してください。

$("#log").html(
  $("#container")[0].getBoundingClientRect().width
);

#container {
    background: blue;
    width: 543.5px;
    height: 20px;
    margin: 0;
    padding: 0;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container"></div>
<p id="log"></p>

質問は古いですが、ここに私の経験を追加したいと思います：上記のコンセンサスは、jQueryの丸めが丸められていない計算と同じくらい効果的であるようです-しかし、私が行っていることにはそうではないようです。

私の要素には一般的に流動的な幅がありますが、AJAXを介して動的に変化するコンテンツです。コンテンツを切り替える前に、要素のサイズを一時的にロックして、トランジション中にレイアウトが跳ね回らないようにします。次のようなjQueryを使用していることがわかりました。

$element.width($element.width());

実際の幅と計算された幅の間にサブピクセルの違いがあるように、いくつかのおかしさを引き起こしています。（具体的には、テキストの1行から別の行に単語がジャンプし、ロックされただけでなく、幅が変更されたことを示します。）別の質問から- 要素の実際の浮動小数点幅を取得 -見つけましたアウトwindow.getComputedStyle(element).width丸められていない計算を返します。だから私は上のコードを次のようなものに変更しました

var e = document.getElementById('element');
$('#element').width(window.getComputedStyle(e).width);

そして、そのコードで- 面白いバウンスはありません！その経験は、丸められていない値が実際にすることを示唆しているようだし、右、ブラウザに問題？（私の場合、Chromeバージョン26.0.1410.65。）

Ross Allenの答えは良い出発点ですが、getBoundingClientRect（）。widthを使用すると、jqueryの幅関数ではないパディングと境界線の幅も含まれます。

返されるTextRectangleオブジェクトには、パディング、スクロールバー、およびボーダーが含まれますが、マージンは含まれません。Internet Explorerでは、外接する四角形の座標には、クライアント領域の上下の境界が含まれます。

width正確に値を取得することが目的である場合は、次のようにパディングと境界を削除する必要があります。

var a = $("#container");
var width = a[0].getBoundingClientRect().width;

//Remove the padding width (assumming padding are px values)
width -= (parseInt(a.css("padding-left")) + parseInt(a.css("padding-right")));

//Remove the border width
width -= (a.outerWidth(false) - a.innerWidth());

あなたはgetComputedStyleそれのために使うことができます：

parseFloat(window.getComputedStyle($('#container').get(0)).width)

以下を使用して、正確な幅を取得します。

var htmlElement=$('class or id');
var temp=htmlElement[0].style.width;