要素からあふれた部分も含めた幅を求めたい

jQueryには適切なメソッドはなし

百聞は一見にしかずということで、まずはこちらをご覧ください。

white-spaceにpreが指定してあるため、文章は改行せずに、あふれてしまいます。

ここで求めたいのは矢印で示された領域です。

もしもoverflow:hiddenが指定されたら非表示になってしまう部分を含めた幅です。

幅を求めるにはouterWidth(true)やprop('clientWidth')やwidth()などがありますが、今回のようなケースではどのメソッドを使っても必ず300が返ってきます。

残念ながらjQueryには今回のようなケースをfixするメソッドはないため、scrollWidthというプロパティを利用します。

scrollWidthとは、DOMオブジェクトの持っているプロパティの一つで、スクロールビューの幅を保持しています。

今回は対象となる要素にはクラス名しか与えられていないため、あえてjQueryオブジェクトからDOMオブジェクトに変換をします。

以前jQueryオブジェクトとDOMオブジェクトの相互変換で紹介した、get()メソッドを使います。

※この.ELEMENTというdivは一番最初に登場する（インデックスが0である）と仮定します。

var ELEMENT = $('.ELEMENT').get(0);
var width = ELEMENT.scrollWidth;

もちろんidやタグ名などで一意に要素を取得できる場合は、document.getElement系メソッドを用いて、はじめからDOMオブジェクトとして取得しても問題ありません。