HTML・レイアウトの操作:

Nodeの外枠サイズを取得

borderとpaddingを含めた、Nodeの外枠のサイズを取得する。
対象Nodeが「display: none」で隠されていてもサイズを取得可能。
※Javascript標準の.offsetWidthや.offsetHeightでは隠されたNodeのサイズは取得できない。

Node
Nodeを指定 id値を文字列で指定してもよい
String
取得する方向を指定 大文字・小文字で指定可能
W = 横幅を取得 ・ H = 高さを取得
●必須引数 ●オプション引数(省略可能)

記述例

$getOutSize($id('main_navi'), 'W')
$getOutSize('main_navi', 'h')

戻り値

取得したサイズを数値で返す。

動作サンプル

width: 400px;
height: 130px;
padding: 20px 40px;
border: 5px solid #c6dbde;
width: 200px;
height: 130px;
padding: 20px 20px;
border: 5px solid #c6dbde;
Javascript : var nodeW=$getOutSize($id('sample1'),'W'); var nodeH=$getOutSize($id('sample1'),'H'); var resultStr='横幅='+nodeW+' / 高さ='+nodeH;
width: 400px;
height: 130px;
padding: 20px 40px;
border: 15px dashed #c6dbde;
Sass : #sample2 { display: none; width: 400px; height: 130px; padding: 20px 40px; border: 15px dashed #c6dbde; }
Javascript : var nodeW=$getOutSize('sample2','w',true); var nodeH=$getOutSize('sample2','h',true); var resultStr='横幅='+nodeW+' / 高さ='+nodeH;
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。