任意のサイズをpxに変換

前書き

jQueryでレスポンシブなサイトを構築するときに困るのは,jQueryのプラグインを使うときだろう.
jQueryのプラグインを導入するとき,多くのサイズ指定がpx指定で,「%」指定に対応していないことがあげられる.
こうなると,別のjQueryプラグインを探したり,改造したりする必要性が出てくるが,欲しい機能のものが見つからなかったり,保守性の悪い状態になってしまう.
こういった状況を改善するため,指定した要素において,任意のサイズ指定に対するpx値を取得するjQueryコードを作ってみた.

コード

/*
 * 指定された任意の単位の数値をpxに変換する
 * @param {string} size 任意の単位を含む数値
 * @returns {integer} px単位の数値
 */
function SizeToPixel(size, target) {
  switch (arguments.length) {
	case 0:
	default://引数間違ってるので,return=0
	  return 0;
	  break;
	case 1://引数が1つしかないので,ターゲットをbodyにする
	  target = 'body';
	  break;
	case 2://引数は2つあり,通常処理できる
	  if (target === '') {
		target = 'body'; //空文字を送りつけられた!!
	  }
	  break;
  }
  var SizeToPixel_DivObj = $($.parseHTML(''))
		  .attr('id', 'SizeToPxcel_temp_div')
		  .appendTo($(target));
  var px = SizeToPixel_DivObj
		  .css('width', size)
		  .width();
  return px;
}

説明

引数

引数説明
sizepx取得したいサイズを単位付きで指定
targetターゲットのidを指定
不要であれば省略可能

戻り値

説明
px単位の値が返ってくる
​取得不能は'0'

使用例1

引数を1つ指定し,bodyタグの幅の50%をpxに変換して返す例.

var get_width;
get_width = SizeToPixel('50%'); //bodyタグの幅の50%をpxに変換して返す

使用例2

引数を2つ指定し,id=articleのオブジェクトの幅の50%をpxに変換して返す例.

var get_width;
get_width = SizeToPixel('50%', 'article'); //id=articleのオブジェクトの幅の50%をpxに変換して返す

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください