jQueryを使って画面上の文字列の幅を取得するサンプル

      2016/05/22

JQueryを使って画面上の文字列の幅を取得するサンプル

■画面上で文字列の幅を調べる

jQueryを利用して対象の文字列が画面上で何ピクセルあるのか、というのを取得するサンプルです。画面上での文字の幅を取得することで、折り返しが発生しないようにフォントサイズに自動調整したり、ということが可能になります。

以下、サンプルコードです。

<!DOCTYPE html>
<html lang="ja">
	<head>
	    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
	    <script>
	    	$(document).ready(function(){
	    		string = 'ほげほげほげほげほげー';

	    		// ここでstringに入っている文字列の幅のピクセル数を取得することができる。
	    		widthPixel = strWidth(string);
	    		alert(widthPixel);

	    		// 以下のようにフォントサイズを設定することで、フォントの大きさを変更した後の
	    		// 幅を取得することもできる
	    		$('#widthcheck').css('font-size', '10px');
			 	$('#widthcheck').css('visibility', 'hidden');
			 	$('#widthcheck').css('position',  'absolute');
			 	$('#widthcheck').css('white-space', 'nowrap');
			 	widthPixel = strWidth(string);

			 	alert(widthPixel);
	    	});

	    	function strWidth(str) {
			  var e = $("#widthcheck");
			  var width = e.text(str).get(0).offsetWidth;
			  e.empty();
			  return width;
			}
	    </script>
	</head>

	<body>
		<span id="widthcheck" style="visibility:hidden;position:absolute;white-space:nowrap;"></span>
	</body>
</html>

こんな感じで取得することができます。CSSが適用されている場合は、CSSが適用された後の幅が取得できます。
使ってみてください。では。

megane

megane

最近、個人事業主から法人へと進化しました。 エンジニア歴13年位です。PHPとかMysqlを使ってWebシステムを構築します。 Javaも書きます。 CakePHPも使います。 サーバのチューニングもごりごりやります。 あと、お肉と自動車が好きです。Twitterとか申請どうぞ。

 - jQuery , ,