web-dev-qa-db-ja.com

要素の実際の浮動小数点幅を取得する

JQuery（v1.7.1）を使用しており、要素の絶対的な浮動小数点幅を取得する必要がありますが、jQueryのすべての幅メソッドは幅の値を四捨五入しているようです。

たとえば、要素の実際の幅が20.333333px、jQueryのwidthメソッドは20、つまり、小数値を無視します。

これで私が意味することを見ることができます jsFiddle

だから、私の質問は次のとおりです。要素の幅の浮動小数点値を取得するにはどうすればよいですか？

jquerycssfloating-pointwidth
44
Sathvik

すでにDOM要素への参照がある場合、 element.getBoundingClientRect で必要な値が取得されます。

このメソッドはInternet Explorer 4から存在しているため、どこでも安全に使用できます。ただし、widthおよびheight属性はIE9 +にのみ存在します。 IE8以下をサポートしている場合は、計算する必要があります。

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

var width;
if (rect.width) {
  // `width` is available for IE9+
  width = rect.width;
} else {
  // Calculate width for IE8 and below
  width = rect.right - rect.left;
}

getBoundingClientRectは、Chrome 28のwindow.getComputedStyleよりも70％高速であり、Firefoxでは違いが大きくなります。 http://jsperf.com/getcomputedstyle -vs-getboundingclientrect

65
Ross Allen

これを試して：

var element = document.getElementById("a");
alert(window.getComputedStyle(element).width);

更新されたフィドル： http://jsfiddle.net/johnkoer/Z2MBj/18/

13
John Koerner