目次
前書き
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;
}
説明
引数
| 引数 | 説明 |
|---|---|
| size | px取得したいサイズを単位付きで指定 |
| 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に変換して返す
コメント