HTML要素の幅を小数点以下まで取得する方法

HTML 要素に対して自動計算された幅を、小数px単位で正確に取得したいのですが、可能なのでしょうか。
どういうケースかといいますと、以下をご覧ください。

html
1<!doctype html>
2
3<style>
4span{
5  position: absolute;
6  overflow: auto;
7  white-space: nowrap;
8  text-overflow: ellipsis;
9}
10</style>
11
12<span>foo</span><!-- この要素に入っている文字の幅が知りたい -->
13
14<script src="jquery-2.1.4.js"></script>
15
16<script>
17  // 問題の箇所
18  $("span").width($("span").width());
19</script>

「問題の箇所」これ、何も起こらないだろうと思うのですが、そうでもないのです。

こちらの環境で、デバッグツールのインスペクタによると、span要素の正確な幅は21.125pxなのです。
ところがjQueryは小数に非対応のようで、上記コードによって幅は21pxに縮んでしまいます。

1 足せば良い話なのですが、なんか負けた気がします。不要な場合もあるはずなので。
せめて小数部が存在するかどうかだけでも判定する方法はないでしょうか。

よろしくお願いします。

行動規範の内容に同意します

回答3件

getBoundingClientRect()はどうでしょうか？

HTML
1<span onclick="alert(this.getBoundingClientRect().width);">foo</span>

投稿2015/08/09 15:31

a-tadashi

総合スコア24

tozjp

2015/08/10 06:48

ご回答有難うございます。そちらはウェブ標準ではないようなので、極力使用したくありません。 (Chromeではメソッドが未定義でした。)

a-tadashi

2015/08/10 15:06 編集

確認はChromeで行いましたが、JQueryでは未定義のようですね。確認不足ですみませんでした。解決済みですが念のため補足しますと、JQueryでは以下のようになります。 alert($('span').get(0).getBoundingClientRect().width); IE11では動きましたが、IE8では動きませんでした。ブラウザによっては動作しないかも知れません。W3Cの情報は以下の通りです。 http://www.w3.org/TR/cssom-view/

tozjp

2015/08/14 08:49

あれ？ちょっと早とちりをしていました！ jQueryのメソッドではないことは分かっていたので、生のElementオブジェクトを取り出してから試したつもりでいたんですが、おそらく確認コードに間違いがあったようです。確かに、今もう一度試したら動きました。こちらこそ確認不足で申し訳ありません。

行動規範の内容に同意します

ベストアンサー

javascript
1function getStyleValue(_elem, _StyleName) {
2  var _Element = _elem;
3  if (!_elem) {
4    console.error('Element is null : Elementが存在しません。');
5    return '';
6  }
7  var style;
8  if (document.defaultView) {
9    style = document.defaultView.getComputedStyle(_Element, '');
10  } else {
11    style = _Element[currentStyle].getAttribute(_StyleName);
12  }
13  return style[_StyleName];
14};
15
16//getStyleValue(document.getElementById("pageID_qadetail"),"height");//小数点込の高さ
17//teratailのラッパー(body)の高さを求める

上記のような処理ではどうでしょうか

投稿2015/08/10 06:05

Cf_cwd

総合スコア730

tozjp

2015/08/10 06:54

ありがとうございます！主要なブラウザで動作確認できました。ただ、1点気になったのは、`_Element[currentStyle]`の部分です。 `currentStyle`は引用符で囲まなくてもいいのでしょうか。グローバル変数ですか？おそらく対応ブラウザの分岐によっては通るコードと推測したのですが、手元のブラウザではどれも正常に動いているようなので、杞憂ならいいのですが。

Cf_cwd

2015/08/10 12:00

_Element.currentStyleで大丈夫そうですね、以前のコードを引っ張ってきていたもので…… IE対策だったと思います。申し訳ない

tozjp

2015/08/10 12:16

いえ、ご丁寧にありがとうございました。 Cf_cwdさんの方法で解決できました！

行動規範の内容に同意します

次期バージョンのjQuery 3.0では小数点以下も返すように変更されるそうです。

http://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/

投稿2015/08/10 03:13

編集2015/08/10 06:06