最近の制作において、画面上のテキストの幅（ピクセル数）を取得しなければならない、ということがありました。

こういったことをする場合、最近ではjQueryを使うことが多いと思います。

私自身もそうしたかったのですが、諸事情によりjQueryが使えないという状況に。

というわけで、JavaScriptだけを使ってそれを実現する方法をご紹介します。

考え方

まずは考え方ですが、基本的に以下のような手順になります。

1. 非表示状態のSPAN要素を作成
2. SPAN要素にテキストを出力
3. SPAN要素の幅を取得
4. SPAN要素を削除

重要なのは非表示で出力することです。CSS的には「visibility」を「hidden」にします。

よくやる間違いが、「display」を「hidden」にすることです。これをやってしまうと、JavaScript的にはSPAN要素を作成したのに、ページには出力されないという無駄なことになってしまいます。

HTML&JavaScriptコード

今回は、テキストボックスに入力したテキストのピクセル数を取得するということにしました。

以下に私が作ったコードの重要部分をコピペします。

HTMLは以下。

<form id="form1">
	<input type="text" id="txt_str" value="" />
	<input type="button" id="btn_submit" value="calc" />
</form>

JavaScriptは以下です。

var setStyle = function( ele, styles ) {
	Object.keys( styles ).forEach( function ( key ) {
		ele.style[key] = styles[key];
	});
}

var calcStrWidth = function( str, sz, fmly ) {
	var ele = document.createElement('span');
	ele.id = 'calc';
	ele.innerHTML = str;
	var styles = {
		'white-space': 'nowrap',
		'visibility': 'hidden'
	};
	if( sz != undefined ) {
		styles['font-size'] = sz;
	}
	if( fmly != undefined ) {
		styles['font-family'] = fmly;
	}
	setStyle( ele, styles );
	document.body.appendChild( ele );
	var ele_w = ele.offsetWidth;
	document.body.removeChild( ele );
	return ele_w;
};

var pushCalc = function() {
	var str = document.forms.form1.txt_str.value;
	var str_w = calcStrWidth( str );

	alert( str_w );
};

var loadEvent = function() {
	document.forms.form1.btn_submit.addEventListener( 'click', pushCalc, false );
}
window.addEventListener( 'load', loadEvent, false );

以下デモページです。

Calculate Element Width with JavaScript

コードの簡単な説明

簡単にJavaScriptのコードの説明をします。

setStyle : 指定の要素にスタイルを適用しています。

calcStrWidth : 今回のメイン部分です。中心となる動作は、createElementとかappendChild、removeChildです。最後に幅を取得して返しています。

pushCalc : HTMLのボタンを押した時の動作です。

loadEvent : ページを構築した後に上記のボタン動作を設定します。これをしないと「document.forms.form1」あたりでnullでエラーが出たりします。

あまり使うことはないかも

ここまで書きましたが、個人的な印象としてはあまり使うことはないと思われます。

「calcStrWidth」について、引き数には全く触れませんでしたがfont-sizeとfont-familyの指定もできるようになってます。

それをしたい場合は、「calcStrWidth( str, ’30px’, ‘Meiryo’ )」とします。

あと、上記コードの対応環境ですが、私が調べたのは以下です。

Mac/Windows : Safari、Chrome、Firefox、IE11、Edge
iOS/Android : Safari、Chrome、Firefox、Androidブラウザ

主要部分ではないですが、「addEventListener」を使っているため、IE8では間違いなく動きません（未確認）

というわけで、必要な方はコピペして使ってください。