HTML・レイアウトの操作:

Nodeの内部サイズを取得

borderとpaddingのサイズを除いた、Nodeの内側のサイズを取得する。

Node
Nodeを指定 id値を文字列で指定してもよい
String
取得する方向を指定 大文字・小文字で指定可能
W = 横幅を取得 ・ H = 高さを取得
Bool
paddingを含める true = paddingを含む ・ false = paddingを含まない / 省略した場合は false となる
●必須引数 ●オプション引数(省略可能)

記述例

$getContSize($id('main_navi'), 'W')
$getContSize('main_navi', 'h', true)

戻り値

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

動作サンプル

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=$getContSize($id('sample1'),'W'); var nodeH=$getContSize($id('sample1'),'H'); var resultStr='width='+nodeW+' / height='+nodeH;
width: 50vw;
height: 130px;
padding: 20px 40px;
border: 15px dashed #c6dbde;
width: 65vw;
height: 130px;
padding: 20px 20px;
border: 15px dashed #c6dbde;
Javascript : var nodeW=$getContSize('sample2','w',true); var nodeH=$getContSize('sample2','h',true); var resultStr='width='+nodeW+' / height='+nodeH;
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。