javascript - インライン要素の幅

Question

ドキュメントに追加せずに、インライン要素の幅をどのように知ることができますか？

追加して

var span = document.createElement('span');
span.innerHTML = 'Hello, world!';
span.offsetWidth; //0
document.body.appendChild(span);
span.offsetWidth; //70

ドキュメントに追加せずにどうですか？

私の英語でごめんなさい）

Answer 1

要素の幅は明らかに使用されるスタイル (フォント サイズなど) に依存するため、要素が DOM 内のどこにあるかを知らずに要素の幅を計算することは不可能です。

画面に表示したくない場合は、非表示の要素に追加できます。

Answer 2

要素自体が DOM の一部でない場合、要素の幅を取得することはできません。

追加する必要がありますが、可視領域の外側に配置して (position: absolute および負の left/top プロパティを使用)、幅を取得したら削除することもできます。

Answer 3

要素が追加されるまで、スタイル コンテキストに依存するため、その幅を確実に知る方法はありません。

jQuery のwidth()メソッドには、要素に対して使用するトリックがありdisplay: noneます。DOM に追加されていない要素に対して機能するかどうかはわかりません (要素を一時的に表示し、幅を取得してから、再度非表示にすることで機能します)。 ）。